React 入门：对比 Reac t的新旧生命周期

如何理解“旧”与“新”

上篇文章分享了 React【旧】（版本）的生命周期。谈到旧，自然就会有对应的新。

React 生命周期的新旧是基于 React 的版本来讲的。新旧版本切换过程中，就出产生差异，如下：

• 出现过时的生命周期钩子函数，过时的组件生命周期钩子函数可能会带来不安全的编码实践。
• 引入新的生命周期函数钩子，或者处理过程。这个新的知识需要我们进行一个全新的学习。

很多人一谈到新，第一时间就会感受到学习的压力。其实大可不必，因为这种新并不是一个全新的技术框架，而只是迭代了一个新的版本，增加一些新的特性，移除了一些不合适的内容，而且官方还提供了逐步迁移路径，也就是帮我们从旧到新如何平滑的过渡。
那么，我们需要对新旧版本做对比，找出新旧版本的差异，然后针对性的进行学习。

旧 - 生命周期图谱

新 - 生命周期图谱

官方生命周期图谱：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

过时的钩子函数

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

过时的原因如下：

• 这些生命周期钩子函数，经常被误用和滥用。
• 预计在未来将增加的异步渲染中，它们潜在的误用问题可能更大。

在 16.3 版本以后，为这些生命周期钩子函数添加了 UNSAFE_ 前缀。

“unsafe” 不是指安全性，而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug，尤其是在启用异步渲染之后。

因此，我们应该避免使用它们。

新增的生命周期钩子函数

• getDerivedStateFromProps(props, state)
  该钩子会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
  它是个静态方法，接收两个参数：props 和 state。
  它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
  如果返回了 state 对象，会失去数据更新的能力。
  日常开发工作中几乎用不到，只有 state 的值在任何时候都取决于 props 时，可以选择使用。
  派生状态会导致代码冗余，并使组件难以维护。所以不推荐使用，了解即可。
• getSnapshotBeforeUpdate
  该钩子在最近一次渲染输出（提交到 DOM 节点）之前调用。
  它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
  此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。
  该钩子也基本很少用。

【注意】如果使用了新的生命周期钩子函数，就不能再使用过时的钩子函数。否则控制台会报错。

改变生命周期的关键版本

React 对其生命周期做出调整改变，涉及到的两个关键版本分别是：16.3、17.0。

• 16.3 之前的版本：就是上面说的旧版本。

  16.3 之前的版本遵循旧的生命周期，可以正常使用那几个过时钩子函数。

• 16.3 这个版本

  为不安全的生命周期引入别名，UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps 和 UNSAFE_componentWillUpdate。（旧的生命周期名称和新的别名都可以在此版本中使用。）

• 16.3 之后的版本
  为 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 启用废弃告警。（旧的生命周期名称和新的别名都将在这个版本中工作，但是旧的名称在开发模式下会产生一个警告。）

• 17.0 之后的版本
  删除 componentWillMount、componentWillReceiveProps 和 componentWillUpdate。（在此版本之后，只有新的 “UNSAFE_” 生命周期名称可以使用。）

新旧生命周期钩子函数使用总结

• 一定要确认现在使用的 React 版本，以及未来会使用的版本。
• 根据版本使用正确的钩子函数。
• 无论新旧生命周期钩子函数，尽量避免使用过时钩子函数和新增的钩子函数，因为实际工作中常用就是以下 3 个：
  • render()
  • componentDidMount()
  • componentWillUnmount()

如果确实需要使用新增的钩子函数，建议先到 React 官网查看相关使用说明，以避免因此而引发的问题。