React
组件的生命周期
componentWillMount
: 组件将要被挂载,此时还没有开始渲染虚拟DOM
render
:第一次开始渲染真正的虚拟DOM
,当render
执行完,内存中就有了完整的虚拟DOM
了
componentDidMount
: 组件完成了挂载,此时,组件已经显示到了页面上,当这个方法执行完,组件就进入都了 运行中 的状态
componentWillReceiveProps
: 组件将要接收新属性,此时,只要这个方法被触发,就证明父组件为当前子组件传递了新的属性值;
shouldComponentUpdate
: 组件是否需要被更新,此时,组件尚未被更新,但是,state
和 props
肯定是最新的
componentWillUpdate
: 组件将要被更新,此时,尚未开始更新,内存中的虚拟DOM
树还是旧的
render
: 此时,又要重新根据最新的 state
和 props
重新渲染一棵内存中的 虚拟DOM
树,当 render
调用完毕,内存中的旧DOM
树,已经被新DOM
树替换了!此时页面还是旧的
componentDidUpdate
: 此时,页面又被重新渲染了,state
和 虚拟DOM
和 页面已经完全保持同步
componentWillUnmount
: 组件将要被卸载,此时组件还可以正常使用;
- React组件的生命周期树,如下图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2c1e732aed7d954b9fdc3a13868fc8a2.png)
或者另一个图理解:
![react生命周期图](https://i-blog.csdnimg.cn/blog_migrate/eb99f7dca69a8dabf2ff357c3b2ab3ce.png)
defaultProps
:在组件创建之前,会先初始化默认的props
属性,这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载候,首先调用 constructor
构造器中的 this.state = {}
,来初始化组件的状态。React
生命周期的回调函数总结成表格如下:
![React生命周期回调函数总结](https://i-blog.csdnimg.cn/blog_migrate/e5b9cca571bf53efeb544c02e6f3f93e.png)
- 组件生命周期的执行顺序: