# 生命周期

## 旧版本

![2\_react生命周期(旧)](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-9142993ab21f009134a7935a55001ff111a4bda7%2F2_react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\(%E6%97%A7\).png?alt=media)

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

1. `挂载时`，也就是组件第一次初始化的时候
2. `setState()`，调用`setState()`更该状态机的时候
3. `forceState()`，调用`forceState()`方法强制更新的时候
4. `父组件render`，父组件发生渲染时，也就是调用了`render()`方法
5. 卸载，执行`componentWillUnmount()`

## 新版本

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

![3\_react生命周期(新)](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-d27e4899c1ff28c2e01b7cd2766485b0c5f85648%2F3_react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\(%E6%96%B0\).png?alt=media)

三个被废弃的：

* `componentWillMount`
* `componentWilReceiveProps`
* `componentWilUpdate`

新增的：

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

  ```javascript
  // 请求参数为props
  // 返回为state
  // 适用场景，state的状态取决于props时使用
  static getDerivedStateFromProps(props) {
    return this.state
  }
  ```
* `getSnapshortBeforeUpdate`，（不是太常用），再最后一次输出之前调用

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

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