在 React 中，因为涉及到新旧版本，所以生命周期钩子也是有所不同的。

React 17.x 之前

在 React 17.x 之前，生命周期钩子是这样的

constructor：在类式组件挂载之前运行。

• 一般来说，在 React 中 constructor 仅用于两个目的，即声明 state 以及将你的类方法绑定到你的类实例上。

componentWillMount：组件挂载前调用

• 在 React 17.x 之前叫 componentWillMount，在 17.x 中使用该钩子，控制台会警告，使用 UNSAFE_componentWillMount 可解决警告问题。在 18.x 中旧名称已被弃用，在 React 未来的主版本中，只有新名称才有效。

componentDidMount：组件挂载完毕调用

• 在这个钩子里可以做一些常用的初始化操作，例如，发送网络请求、开启定时器，订阅消息等

shouldComponentUpdate (nextProps, nextState, nextContext)：组件是否需要更新

• 返回一个布尔值，返回 true 表示组件需要更新，false 表示不需要更新，默认值为 true。
• 当收到新的 props 或 state 时，React 会在渲染之前调用 shouldComponentUpdate。
• 初始渲染或使用 forceUpdate 时将不会调用此方法。
• 接收三个参数，nextProps（组件即将用来渲染的下一个 props），nextState（组件即将渲染的下一个 state），nextContext（组件将要渲染的下一个 context）

componentWillUpdate (nextProps, nextState)：组件将要更新时调用

• 在 React 17.x 之前叫 componentWillUpdate，在 17.x 中使用该钩子，控制台会警告，使用 UNSAFE_componentWillUpdate 可解决警告问题。在 18.x 中旧名称已被弃用，在 React 未来的主版本中，只有新名称才有效。

componentDidUpdate (prevProps, prevState, snapshot?)：组件更新了 props 或 state 重新渲染后立即调用它

• 不会在首次渲染时调用
• prevProps (更新之前的 props)，prevState (更新之前的 state)，snapshot (如果你实现了 getSnapshotBeforeUpdate 方法，那么 snapshot 将包含从该方法返回的值。否则它将是 undefined)
• 如果定义了 shouldComponentUpdate 并且返回值是 false 的话，那么 componentDidUpdate 将不会被调用

componentWillReceiveProps (nextProps)：子组件将要接收新的 props 时调用，第一次不会调用

• 在 React 17.x 之前叫 componentWillReceiveProps，在 17.x 中使用该钩子，控制台会警告，使用 UNSAFE_componentWillReceiveProps 可解决警告问题。在 18.x 中旧名称已被弃用，在 React 未来的主版本中，只有新名称才有效。

componentWillUnmount：组件将要卸载前调用

• 在这个钩子里，可以做一些收尾工作，例如，清除定时器，取消订阅消息等

旧版总结

React 旧版本（17.x 之前）生命周期钩子主要分三个阶段，初始化阶段、更新阶段、卸载阶段。如图：

React 17.x 之后

在 React 17.x 之后，生命周期钩子有所调整

getDerivedStateFromProps (props, state)：返回一个对象来更新 state，或返回 null 不更新任何内容。（使用场景极罕见）

• 如果定义了 static getDerivedStateFromProps，React 会在初始挂载和后续更新时调用 render 之前调用它
• 接收 2 个参数，props (组件即将用来渲染的下一个 props)、state (组件即将渲染的下一个 state)

getSnapshotBeforeUpdate (prevProps, prevState)：在 React 更新 DOM 之前时直接调用它，使你的组件能够在 DOM 发生更改之前捕获一些信息（使用场景极罕见）

• 可以返回你想要的任何类型的快照值，或者是 null，返回的值将作为第三个参数传递给 componentDidUpdate
• 如果定义了 shouldComponentUpdate 并返回了 false，则 getSnapshotBeforeUpdate 不会被调用
• 接收两个参数，prevProps (更新之前的 Props)、prevState (更新之前的 State)

新版总结

React 17.x 之后生命周期钩子也分三个阶段，初始化阶段、更新阶段、卸载阶段。

与老版本相比，新版本遗弃了 componentWillMount、componentWillUpdate、componentWillReceiveProps 这三个钩子，新增加了两个使用场景极罕见的钩子，getDerivedStateFromProps、getSnapshotBeforeUpdate