生命周期

旧版本

2_react生命周期(旧)

上面的生命周期图展示了不同情况的生命周期方法回调的顺序，共有四个起始点，也就是四种情况：

1. 挂载时，也就是组件第一次初始化的时候

2. setState()，调用setState()更该状态机的时候

3. forceState()，调用forceState()方法强制更新的时候

4. 父组件render，父组件发生渲染时，也就是调用了render()方法

5. 卸载，执行componentWillUnmount()

新版本

新版本可以用旧版本的钩子，如果是已经移除的钩子函数，则需要增加UNSAFE前缀。

3_react生命周期(新)

三个被废弃的：

• componentWillMount

• componentWilReceiveProps

• componentWilUpdate

新增的：

• getDerivedStateFromProps，（不常用）从Props中获取一个派生的State，这是一个静态方法。

  // 请求参数为props
  // 返回为state
  // 适用场景，state的状态取决于props时使用
  static getDerivedStateFromProps(props) {
    return this.state
  }

• getSnapshortBeforeUpdate，（不是太常用），再最后一次输出之前调用

  // 包含两个参数，上一次渲染的props，上一次渲染的state
  getSnapshortBeforeUpdate(preProps, preState) {
    return xxx; // 返回值会交给最后一个生命周期 componentDidUpdate 钩子函数
  }

  **使用场景：**让组件在发生更改之前从DOM中捕获一些信息（比如滚动位置），并将返回值作为参数传递给componentDidUpdate()