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

时间:2017-10-09 15:58:01

标签: javascript reactjs javascript-events addeventlistener

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

我想知道React的做法是否更好:

  1. 将事件侦听器附加到每个子组件中的componentDidMount,因为子组件负责监听此事件。
  2. 将单个事件listenet附加到父组件的componentDidMount,并强制其子项在此事件触发时重新呈现。
  3. 从性能角度来看,我认为#2更好,但从React方法论的角度来看,我认为#1更好。想法?

1 个答案:

答案 0 :(得分: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>
 }
}