[译]如何使用React生命周期方法

原文：How to use React Lifecycle Methods

React 生命周期

大致上分三类

• Mount
• Update
• Unmount

Mount

• constructor()
• componentWillMount()
• render()
• componentDidMount()

Update

• componentWillReceiveProps() / static getDerivedStateFromProps()
• shouldComponentUpdate()
• componentWillUpdate() / getSnapshotBeforeUpdate()
• render()
• componentDidUpdate()

Unmount

• componentWillUnmount()

生命周期方法

componentWillMount（即将移除）

componentWillMount()
复制代码

当 React 渲染一个组件的是你，首先进入该方法。

Note：componentWillMount()是惟一一个在render()以前调用的生命周期方法。所以是在服务端渲染中惟一被调用的方法。

由于componentWillMount()将被删除，因此官方推荐使用constructor()替代该方法

**Update：**该方法应该在新的代码中避免使用

State

能够在该方法中使用this.setState()可是不必定触发从新渲染。

componentDidMount

componentDidMount()
复制代码

当该方法被调用时候，React 已经渲染了组件而且将组件插入 DOM。所以若有有任何依赖于 DOM 的初始化，应该放在这里。

State

该方法中可使用this.setState()方法，它将触发从新渲染。

Use Cases

• fetch data
• 依赖 DOM 初始化
• 添加事件监听

componentWillReceiveProps（即将移除）

componentWillReceiveProps(nextProps)
复制代码

当组件接收到新的props，该方法会首先被调用，可是须要注意一点，即便props并无发生改变，该方法也会被调用，因此使用该方法的时候要确保比较this.props和nextProps，避免没必要要的渲染。

Update：componentWillReceiveProps将被移除，使用新的static getDerivedStateFromProps代替。

static getDerivedStateFromProps（新增）

static getDerivedStateFromProps(props, state)
复制代码

每次render都会调用该方法——即便props没有发生变化。因此要谨慎使用。

shouldComponentUpdate

shouldComponentUpdate(nextState, nextProps)
复制代码

有些时候须要避免没必要要的渲染，可使用该方法。返回false意味着 React 不执行componentWillUpdate()，render()，componentDidUpdate()。

该方法在初始化时候不执行。

**Note：**根据 React 文档，React 可能将shouldComponentUpdate视作提示而不是严格的根据它的返回结果决定是否执行，也就是说可能出现shouldComponentUpdate返回false，可是仍是发生从新渲染。

State

在该方法中不能够设置setState。

Use Case

如前所述，该方法可能有有问题。React 官方提供了另外一个解决办法，因此若是发现某个组件慢，可使用React.PureComponent替代React.component，它将对props和state提供一个浅层对照。

componentWillUpdate（即将移除）

componentWillUpdate(nextProps, nextState)
复制代码

该方法在被渲染前调用。shouldComponentUpdate在新的props进入组件或者state改变的时候调用。

该方法在初始渲染时候不被调用。

Update：shouldComponentUpdate即将被移除。

State

在该方法中不能调用setState。

Use Cases

shouldComponentUpdate方法在render()前会被准确调用，因此在该方法中作任何跟 DOM 相关的操做是不合适的，由于很快会过时。

常见的用例有：

• 根据state的变化设置变量
• 派发事件
• 开始动画

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)
复制代码

该方法在 React 16.3 被添加而且它配合componentDidUpdate。该方法应该覆盖了旧方法shouldComponentUpdate的全部用例。

getSnapshotBeforeUpdate在元素被渲染并写入 DOM 以前调用，这样，你在 DOM 更新前捕获 DOM 信息（例如：滚动位置）。

应该返回一个snapshot值或null，不管返回什么，shouldComponentUpdate均可以接收到snapshot参数。

Use Cases

若是想要得到一个 list 或者一个聊天窗口中的滚动位置，能够在getSnapshotBeforeUpdate中取到这些信息。而后将滚动信息做为snapshot值返回。这容许在更新DOM后在componentDidUpdate中设置正确的滚动位置。

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)
复制代码

React 更新组件后，调用componentDidUpdate。该方法在初始渲染时候不会被调用。

Use Cases

若是组件更新后须要操做 DOM，可使用该方法。

componentWillUnmount

componentWillUnmount()
复制代码

在卸载，销毁组件以前调用该方法。

State

在卸载组件时候不能设置 State

Use Cases

使用该方法清理 actions。

• 删除在componentDidMount或其余地方添加的事件监听
• 断开网络请求
• 清空计时器
• 清理在componentDidMount中建立的 DOM 元素