误区以为父组件render一次,子组件会重新初始化

初学react的时候我有一个误区,以为父组件render的一次,会将子组件先卸载,再将子组件重新初始化,事实证明不是。

这是对react生命周期函数不太清楚。

父子组件都初始化后,父组件再render一次,子组件实际上进行的是声明周期函数中的updation更新过程。

其实也很好理解这个生命周期函数,父组件执行更新过程一次,理所当然,子组件也执行一次,要不然你父组件给我的数据变了呢,我怎么知道,所以我也更新一下下。

那什么时候子组件会重新初始化呢,例如如下代码:你用父组件来控制子组件的显示和隐藏,将其隐藏的这种写法,就是将子组件给卸载了,再次显示,就会重新初始化。

当修改isShow为false的时候,子组件就直接进入卸载过程,执行componentWillUnmount函数后,就从dom中移除了。

{this.state.isShow && <SubComponent></SubComponent>}

再将isShow为true的时候, 此时子组件才是又初始化了一次,开始新的生命周期,进入初始化过程,接着是挂载过程。

猜你喜欢

转载自www.cnblogs.com/shengjunyong/p/12051300.html