前言
所谓的生命周期就是指某个事物从开始到结束的各个阶段,就好像是把人的出生到死亡分成一个个阶段,你肯定是在出生阶段起名字,而不会在成年或者死亡的阶段去起名字。当然在 React.js 中指的是组件从创建到销毁的过程,React 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 React 的生命周期,各个阶段有相对应的事件钩子,用户可以在特定的阶段调用特定的方法。每个阶段组件内部的属性都是不一样的,所以一般特定的钩子做特定的事。
一、React生命周期图
【1】过去
![0fca5d4da46f5411148d573552458383.png](https://i-blog.csdnimg.cn/blog_migrate/afc118387d46e59c5a5f17c9ecf3b31e.png)
【2】现在
![ca26230c96b7ae5eb257aef4e89df77f.png](https://i-blog.csdnimg.cn/blog_migrate/4ad04d879862184a4391518e9ccc7975.png)
二、React生命周期演变
这么多生命周期钩子,实际上总结起来只有三个过程:挂载、更新、卸载,挂载和卸载只会执行一次,更新会执行多次。
一个完整的React组件生命周期会依次调用如下钩子
【1】生命周期演变
React版本 | 挂载阶段 | 更新阶段 | 卸载阶段 |
---|---|---|---|
之前(React 16.3 之前) | 1、constructor 2、componentWillMount 3、render 4、componentDidMount |
1、componentWillReceiveProps 2、shouldComponentUpdate 3、componentWillUpdate 4、render 5、componentDidUpdate |
1、componentWillUnmount |
现在 | 1、constructor 2、getDerivedStateFromProps 3、render 4、componentDidMount |
1、getDerivedStateFromProps 2、shouldComponentUpdate 3、render 4、getSnapshotBeforeUpdate 5、componentDidUpdate |
1、componentWillUnmount |
【2】废弃和新增
原来(Re