複数の子コンポーネントまたは単純な親コンポーネントにイベントリスナーを追加する

Question

複数の子コンポーネントをレンダリングする親コンポーネントがあります。これらの子コンポーネントはそれぞれ、すべてのwindow resizeイベントで再描画する必要があります。

それが良いに練習を反応させるのであれば、私は思ったんだけど：それは、このイベントに耳を傾ける子コンポーネントの責任があるとして、それぞれの子コンポーネントにcomponentDidMountにイベントリスナーをアタッチ

1. 。
2. 親コンポーネントのcomponentDidMountに1つのイベントリスニングセットをアタッチし、このイベントが発生したときに子を再レンダリングさせます。

パフォーマンスの観点から、私は＃2が良いと思っていますが、React-methodologyの観点からは＃1が良いと思います。思考？

Answer 1

反応のデフォルトの動作では、状態または小道具を変更するたびに、コンポーネント（およびその子）を再描画します。あなただけの親コンポーネントに（多分、パフォーマンスを向上させるための適切なデバウンス付き）ウィンドウのサイズ変更を処理し、その結果の状態を設定し、すべての児童の内側のサイズ変更に対処する必要はありません

this.setState({isResized: true}); //trigger the rendering 

、子どもたちが意志追加のコードなしで再レンダリングされます。このような

何かが動作するはず

class ParentComponent extends Component{ 

resizeCallback(e){ 
    this.setState({'isResized', true}); //re-render even MyChildComponent 
} 
componentDidMount(){ 
    window.addEventListener('resize', this.resizeCallback); 
    //alternatively with underscorejs debounce 
    //window.addEventListener("resize", _.debounce(this.resizeCallback, 300)); 
} 
componentWillUnmount(){ 
    window.removeEventListener('resize', this.resizeCallback); 
} 
render(){ 
    <div> 
    <MyChildComponent/> 
    </div> 
} 
}