我有一个呈现多个子组件的父组件。这些子组件中的每一个都应该在每个窗口大小调整事件中重新呈现。
我想知道React的做法是否更好:
componentDidMount
,因为子组件负责监听此事件。componentDidMount
,并强制其子项在此事件触发时重新呈现。从性能角度来看,我认为#2更好,但从React方法论的角度来看,我认为#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>
}
}