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