再回首：React v17生命周期总结

2023-09-16 07:44:37

来到 React v17，不少熟悉却又陌生的元素扑面而来，比如异步渲染机制、新增的新钩子 API，以及大量生命周期函数的移除。

从 v16 开始，React 像跨入了新的时代，性能和新的 API 都令人瞩目，它同时也让我们重新认识了 React，这从重新认识生命周期开始。

理解生命周期

对于初学者而言，了解 React 生命周期最直接的方法，就是把 React 组件理解为一个类生命周期，可以分成四个阶段：

初始化阶段
- constructor()：在组件挂载之前被调用，用于初始化组件状态和绑定事件处理函数。
- getDerivedStateFromProps()：在组件挂载之前被调用，用于从 props 中获取初始状态。
- render()：在组件挂载之前被调用，用于渲染组件。
挂载阶段
- componentDidMount()：在组件挂载之后被调用，用于执行与 DOM 相关的操作，如获取 DOM 元素的引用或在组件中设置计时器。
更新阶段
- shouldComponentUpdate()：在组件收到新的 props 或 state 时被调用，用于判断组件是否需要更新。
- getDerivedStateFromProps()：在组件收到新的 props 时被调用，用于从 props 中获取新的状态。
- render()：在组件需要更新时被调用，用于重新渲染组件。
- componentDidUpdate()：在组件更新之后被调用，用于执行与 DOM 相关的操作，如更新 DOM 元素的引用或在组件中设置计时器。
卸载阶段
- componentWillUnmount()：在组件卸载之前被调用，用于执行与 DOM 相关的操作，如清除计时器或移除 DOM 元素的事件监听器。

新老生命周期的对比

旧生命周期	新生命周期	阶段
`constructor()`	`constructor()`	初始化	在组件挂载之前被调用，用于初始化组件状态和绑定事件处理函数。
`componentWillMount()`	`getDerivedStateFromProps()`	初始化	在组件挂载之前被调用，用于从 props 中获取初始状态。
`render()`	`render()`	更新	在组件需要更新时被调用，用于重新渲染组件。
`componentDidMount()`	`componentDidMount()`	挂载	在组件挂载之后被调用，用于执行与 DOM 相关的操作，如获取 DOM 元素的引用或在组件中设置计时器。
`componentWillReceiveProps()`	`getDerivedStateFromProps()`	更新	在组件收到新的 props 时被调用，用于从 props 中获取新的状态。
`shouldComponentUpdate()`	`shouldComponentUpdate()`	更新	在组件收到新的 props 或 state 时被调用，用于判断组件是否需要更新。
`componentWillUpdate()`	`render()`	更新	在组件需要更新时被调用，用于重新渲染组件。
`componentDidUpdate()`	`componentDidUpdate()`	更新	在组件更新之后被调用，用于执行与 DOM 相关的操作，如更新 DOM 元素的引用或在组件中设置计时器。
`componentWillUnmount()`	`componentWillUnmount()`	卸载	在组件卸载之前被调用，用于执行与 DOM 相关的操作，如清除计时器或移除 DOM 元素的事件监听器。

从以上对比中可以看到，React v17 中的生命周期函数与之前的版本相比，发生了一些变化。一些生命周期函数被移除，另一些生命周期函数被添加。

最显著的变化是，componentWillMount() 和 componentWillReceiveProps() 这两个生命周期函数被移除。componentWillMount() 函数在组件挂载之前被调用，componentWillReceiveProps() 函数在组件收到新的 props 时被调用。这两个函数的移除，意味着组件在挂载之前和收到新的 props 时，不再能够执行任何与 DOM 相关的操作。

另一个变化是，getDerivedStateFromProps() 这个生命周期函数被添加。getDerivedStateFromProps() 函数在组件挂载之前和收到新的 props 时被调用，用于从 props 中获取新的状态。这个函数的添加，使得组件能够在挂载之前和收到新的 props 时，从 props 中获取新的状态，并更新组件的状态。