对 react 生命周期

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 的生命周期，在这里可以进行一些清除定时器的操作