React生命周期

欢迎访问我的博客https://qqqww.com，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

1 前言

学习React，生命周期的各个组件是必须要学习的，对于事件触发的时机至关重要，也决定能不能写出高性能的组件，对于React的生命周期，我还需要更多的学习，多看文档，多写测试code

2 图解React生命周期

[图片上传失败...(image-8f683b-1549985866645)]

3 组件详解

看上图，React生命周期主要分为三个阶段：

1. Mounting：初始化阶段
2. Updating：重新渲染阶段
3. umounting：销毁阶段

关于组件详解，详情请参照官网https://reactjs.org/

3.1 初始化阶段

getDefaultProps()

设置默认的props值，getDefaultProps()方法被调用一次并缓存

getInitialState()

可直接在constructor中定义this.state，只调用一次，可以访问this.props

componentWillMount()

将要装载，在render之前调用，且整个生命周期只调用一次，此时可修改this.state，强调是在每一个组件render之前立即调用

render()

初始化的关键环节，此时创建虚拟DOM，并进行diff算法，重新渲染DOM树，此时不能修改this.state

另外，关于虚拟DOM和diff算法可以看我的另一篇文章虚拟DOM与Diff算法

componentDidMount()

还记得上面那个componentWillMount()将要装载吗？这里已经装载完成了，在render()之后调用，并且强调是在所有的子组件都render完之后才调用，常在这里建立定时器

3.2 重新渲染阶段

componentWillReceiveProps(newProps)

当组件需要接受新的props值时调用

shouldComponentUpdate(newProps, newState)

虚拟DOM的diff算法很重要的环节，返回值是一个布尔值，进行diff算法对比新旧两棵DOM树的props和state是否相同，若相同，则返回false，不需要更新，否则，更新

componentWillUpdate(newProps, newState)

在组件即将要更新props或state但还没有render时调用，此时可以修改this.state

render()

在重新渲染阶段的render根据更新的props和state值进行组件重新渲染

componentDidUpdate()

组件更新完成后调用，在render之后

3.3 销毁阶段

componentWillUnmount()

组件将要卸载调用，此时清除事件监听或者定时器或者一些不必要的变量等，防止内存泄漏

4 参考文章

• 菜鸟教程中的React 组件生命周期

• 慕课网上的React Native实例教程

• React中文文档state&生命周期