React 生命周期新老版本对比解析：探寻变化背后的深层原理
2023-09-18 04:01:13
在对 React 15 的生命周期有了系统的掌握和理解的基础上，我们接着对 React 16 以来的生命周期进行剖析。通过对比新旧两个版本生命周期之间的差异，来探寻变化背后的原因。
关于 React 16 以来的生命周期，下图是目前公认的比较优秀的流程大图。我们先来看 React 16 的生命周期流程图：
[图片]
与 React 15 相比，React 16 的生命周期有以下几个主要变化：
- 新增了两个新的生命周期方法：getDerivedStateFromProps 和 getSnapshotBeforeUpdate。
- 废弃了两个旧的生命周期方法：componentWillMount 和 componentWillReceiveProps。
- 修改了几个旧的生命周期方法的执行时机：componentWillUpdate、componentDidUpdate、componentWillUnmount。
这些变化看似简单，但背后却蕴含着深刻的原理和设计思想。下面，我们就来逐一分析这些变化的原因和意义。
新增两个新的生命周期方法
getDerivedStateFromProps 方法会在组件首次挂载以及父组件更新时被调用，它允许我们在父组件更新时根据新的 props 计算并更新组件的状态。这在很多场景下都非常有用，比如当我们使用 Redux 进行状态管理时，就可以在 getDerivedStateFromProps 方法中从 Redux store 中获取最新的状态并更新组件的状态。
getSnapshotBeforeUpdate 方法会在组件更新之前被调用，它允许我们在组件更新之前获取一些信息，比如滚动条的位置、表单输入框的值等。这些信息可以在 componentDidUpdate 方法中使用，以实现一些特定的功能，比如在组件更新后自动滚动到指定位置、在组件更新后自动聚焦到指定的输入框等。
废弃两个旧的生命周期方法
componentWillMount 方法会在组件挂载之前被调用，它通常被用来初始化组件的状态和数据。然而，在 React 16 中，这个方法已经被废弃了。这是因为在 React 16 中，组件的挂载过程被拆分成了两个阶段：
- 在组件挂载之前，会先调用 getDerivedStateFromProps 方法，以便让我们根据父组件的 props 来计算并更新组件的状态。
- 在组件挂载之后，会调用 componentDidMount 方法，以便让我们执行一些其他的初始化操作，比如发送网络请求、绑定事件监听器等。
这样一来，我们就可以更加灵活地控制组件的挂载过程，避免在组件挂载之前执行一些不必要的操作。
componentWillReceiveProps 方法会在组件接收到新的 props 时被调用，它通常被用来响应 props 的变化。然而，在 React 16 中，这个方法也被废弃了。这是因为在 React 16 中，组件的 props 的变化会被分为两种情况：
- 如果 props 的变化会导致组件的状态发生变化，那么会先调用 getDerivedStateFromProps 方法，以便让我们根据新的 props 计算并更新组件的状态。
- 如果 props 的变化不会导致组件的状态发生变化，那么只会调用 componentDidUpdate 方法，以便让我们执行一些其他操作，比如更新组件的 UI 等。
这样一来，我们就可以更加灵活地响应 props 的变化，避免在 props 变化时执行一些不必要的操作。
修改几个旧的生命周期方法的执行时机
componentWillUpdate 方法会在组件更新之前被调用，它通常被用来在组件更新之前做一些准备工作。在 React 16 中，这个方法的执行时机被修改为在 getDerivedStateFromProps 方法之后。这是因为在 React 16 中，组件的更新过程被拆分成了两个阶段：
- 在组件更新之前，会先调用 getDerivedStateFromProps 方法，以便让我们根据新的 props 计算并更新组件的状态。
- 在组件更新之后，会调用 componentDidUpdate 方法，以便让我们执行一些其他的更新操作，比如更新组件的 UI 等。
这样一来，我们就可以在组件更新之前获取到最新的组件状态，并在此基础上做一些准备工作。
componentDidUpdate 方法会在组件更新之后被调用，它通常被用来在组件更新之后做一些收尾工作。在 React 16 中，这个方法的执行时机没有变化。
componentWillUnmount 方法会在组件卸载之前被调用，它通常被用来在组件卸载之前做一些清理工作。在 React 16 中，这个方法的执行时机也没有变化。
以上就是 React 16 以来的生命周期与 React 15 的生命周期之间的主要差异。通过理解这些差异，我们可以更加深入地掌握 React 的生命周期机制，并将其应用于实际项目开发中，提高代码质量和性能。
