react的生命周期分为三个阶段,分别是mount, update, unmount
1. 装载阶段
- 在老的版本里面,会有
getDefaultProps
和getInitialState
两个方法 - 在新的版本里面,我们直接在
constructor
里面去初始化state
, 用静态方法defaultProps
初始化默认的props
- 接下来就会走到
componentWillMount
,- 这是唯一一个可以直接修改
state
的地方,一般也不会常用这个东西,因为在react17以后会使用异步渲染,所以这个生命周期即将被废弃掉,使用异步渲染后componentWillMount
生命周期有可能不止执行多次,这是官网上说的。 - 一般来说很多人可能会想要在
componenentWillMount
里面做数据请求,以为这样第一次render
的数据就是最新的,但这样的想法是错的,因为ajax请求本身就是异步的。但实际上我们应该在componenentDidMount
里面做数据请求,因为componenentWillMount
和componenentDidMount
之间的时间间隔很短,几乎没有
- 这是唯一一个可以直接修改
-
componentWillMount
执行完了之后会执行render
, 在这里会合成虚拟dom
- 最后是
componenentDidMount
, 这个时候才会把真实的dom
节点挂载到浏览器里面,要使用真实的dom
节点的话应该在componenentDidMount
节点中做
2. 更新阶段(第二阶段更新阶段,更新阶段分为几种方式)
- 第一种是
falseUpdate
, 这个一般来说不建议使用。然后说说另外两种方式 - 一个是
setState
之后,如果state
有改变的话会走一个shouldStateUpdate
的生命周期;另一个是当props
有改变的话,会先走一个WillReceiveProps
的生命周期,再去走shouldComponentUpdate
,shouldComponentUpdate
这个生命周期会return
一个布尔值, 如返回true
, 就会继续下面的生命周期,如果返回 false 就停留在上次的状态。- 说一下
return true
的情况,在这之后会执行componenentWillUpdate
阶段,然后再执行render
和componenentDidUpdate
- 前面说到
props
发生改变之后WillReceiveProps
会去执行,里面可以根据上一次的 props 来重新更改state
, 这个方法也即将被废弃,于是我们可以使用一个静态方法static getDerivedStateFromProps
来替代,由于这是一个静态方法,里面没有this
, 直接return
一个object
, 它的参数就是props
- 说一下
- 这就是更新阶段。然后会进入到销毁阶段
3. 销毁阶段
- 在销毁阶段会进入到一个 componenentWillUnmount 的生命周期,在这里可以进行一些清除定时器的操作