如何理解“旧”与“新”

上篇文章分享了 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 官网查看相关使用说明，以避免因此而引发的问题。

React 入门：对比 Reac t的新旧生命周期相关推荐

React:新旧生命周期及其对比
文章目录概述生命周期(旧) 挂载时更新时父组件render setState forceUpdate 卸载时生命周期(新) 挂载时更新时卸载时新旧生命周期的对比概述不管是vue还是 ...
React之新旧生命周期对比
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
jsonp react 获取返回值_谈谈对 React 新旧生命周期的理解
前言在写这篇文章的时候,React 已经出了 17.0.1 版本了,虽说还来讨论目前 React 新旧生命周期有点晚了,React 两个新生命周期虽然出了很久,但实际开发我却没有用过,因为 Reac ...
React基础学习--新旧生命周期对比（二）
生命周期新旧对比 1. 图示 2. 旧版生命周期代码 <script type="text/babel">// 创建组件class Count extends Reac ...
[react] react中发起网络请求应该在哪个生命周期中进行？为什么？
[react] react中发起网络请求应该在哪个生命周期中进行?为什么? 异步情况可以在componentDidMount()函数中进行. 同步的情况可以在componentWillMount()中 ...
Vue缓存路由（keep-alive）以及新的生命周期
一.概念也就是说,kee-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 .也就是所谓的组件缓存 keep-alive 是 Vue 的内置组件,当它包裹动态组 ...
【React系列】状态（State）和生命周期
在上一篇中写过,组件可以分为函数式组件和类组件,并且更新组件的方法也给出了通过传入ReactDOM.render()方法进行更新.但是这种方式并不能很好地进行封装成独立功能的组件,一些操作会由外部进行 ...
React文档（六）state和生命周期
想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() {const element ...
Android React Native 笔记（二）：Component生命周期
注意绝对不要在componentWillUpdate和componentDidUpdate中调用this.setState方法,否则将导致无限循环调用. 来自 <React Native 中 ...

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

文章目录