将事件侦听器添加到多个子组件或简单父组件

Question

我有一个呈现多个子组件的父组件。每个子组件都应该在每个窗口大小调整事件中重新呈现自己。

我想知道，如果它是更好地作出反应的做法是：

1. 在每个子组件附加事件听众componentDidMount，因为它是子组件的责任来听此事件。
2. 将单个事件侦听器附加到父组件的componentDidMount，并强制其子组件在该事件触发时重新呈现。

从性能的观点来看，我认为＃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> 
} 
}