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

Question

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

我想知道是否更好的 React 实践:

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

从性能的 Angular 来看，我认为 #2 更好，但从 React 方法的 Angular 来看，我认为 #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>
 }
}