5.react之生命周期(旧)

最新推荐文章于 2024-10-11 16:03:23 发布

原创最新推荐文章于 2024-10-11 16:03:23 发布 · 746 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #前端 #javascript

本文详细解析了React组件的生命周期，包括挂载、更新和卸载阶段的关键方法。特别关注了父组件如何影响子组件的渲染过程，以及setState和forceUpdate在更新阶段的作用。

旧声明周期
如图所示，react的生命周期分为挂载时和更新时
挂载时：constructor->componentWillMount->render->componentDidMount
卸载时：componentWillUnmount(通过reactDom.onmountComponentAtNote()卸载)
更新时：分三种情况
(1)父组件render后子组件也render,
(2)通过setState()修改状态,
(3)通过forceUpdate()强制更新
（1）父组件render子组件也render
生命周期执行顺序如下：
父shouldComponentUpdate->父componentWillUpdate->父render->子componentWillReceiveProps->子shouldComponentUpdate->子componentWillUpdate->子render->子componentDidUpdate->父componentDidUpdate
（2）修改setState
shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate
(3)forceUpdate()强制更新
componentWillUpdate->render->componentDidUpdate
重要：如图可以看到setState和forceUpdate中间少了一个shouldComponentUpdate函数是因为forceUpdate是做为强制更新跳过了shouldComponentUpdate函数控制
说明(1)：shouldComponentUpdate是控制是否可被渲染的流程开关它需要返回一个boolean值。不写该函数默认为true，也可手动修改为false,当为false时页面将不重新render,
说明(2)：componentWillReceiveProps函数是可以接受到props更新后的值