React多重组件详细生命周期

发布时间:2019-06-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React多重组件详细生命周期脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

目标

React中内部组件生命周期的运行方式。

生命周期

类调用:
此过程仅在类创建时被一次,即无论创建多少个ReactElement,此过程均只会执行一次

实例化:
此过程仅执行一次,执行完毕后,React组件真正被渲染到DOM
期间执行生命周期函数如下:

变更

此过程会在this.statethis.PRops变更时执行
期间执行生命周期函数如下:

this.state变更

  • shouldComponentUpdate

  • componentWillUpdate

  • render

  • componentDidUpdate

this.props变更

  • componentWillReceiveProps

  • shouldComponentUpdate

  • componentWillUpdate

  • render

  • componentDidUpdate

卸载
此过程在组件销毁前调用一次期间执行生命周期函数如下:

  • componentWillUnmount

整个生命周期所涉及的方法如图所示:

React多重组件详细生命周期

测试多组件生命周期转换

实例

<Super>
    <Sub_1 />
    <Sub_2 />
</Super>

页面加载后:

React多重组件详细生命周期

更新期

React多重组件详细生命周期

卸载期

React多重组件详细生命周期

原文来自:http://www.cnblogs.com/hhhyaa...

脚本宝典总结

以上是脚本宝典为你收集整理的React多重组件详细生命周期全部内容,希望文章能够帮你解决React多重组件详细生命周期所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。