> For the complete documentation index, see [llms.txt](https://yangsx95.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yangsx95.gitbook.io/notes/front-end/react/sheng-ming-zhou-qi.md).

# 生命周期

## 旧版本

![2\_react生命周期(旧)](/files/fM3GeMDVRwuapErwny6S)

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

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

## 新版本

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

![3\_react生命周期(新)](/files/UbQPaawOb0U6bp6cgii6)

三个被废弃的：

* `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()`