向多个子组件或简单的父组件添加事件监听器

Question

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

我想知道 React 实践是否更好：

1. 将事件侦听器附加到每个子组件中的componentDidMount，因为侦听此事件是子组件的责任。
2. 将单个事件侦听器附加到父组件的componentDidMount，并在此事件触发时强制其子级重新渲染。

从性能的角度来看，我认为 #2 更好，但从 React 方法的角度来看，我认为 #1 更好。想法？

Answer 1

React 的默认行为是每次更改组件（及其子组件）的状态或道具时重新渲染它。

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>
 }
}