速览-React 16～React 18功能发布时间表⏰

学习一个门技术，就要搞清楚技术发展的来龙去脉，而不是一头扎进最新的源码，不管不顾的学容易被绕晕，事倍功半。特别是 react 有这么多版本，网上的文章也是各个版本的解读都有，稍有不慎，就被带偏

本篇文章意在列出 react16～react 18 版本发布的功能点，让大家了解 react 主要功能点发布的版本，之后在翻阅网上的文章学习源码时，心里就有数了

React 16.0

时间：2017/09/26

为不安全的生命周期引入别名，旧生命周期名称和新别名在此版本中都有效UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps，UNSAFE_componentWillUpdate
新的 context API，context.provider,context.consumer
createRef, 在 react 16.3 版本之前，只能使用字符串，或者回调函数获取 DOM
forwardRef，支持高阶组件 ref 转发
StrictMode，用来识别和报告不安全的生命周期

增加了对 DevTools 分析器插件的支持。使用 React 实验性性 Profiler API 来手机有关渲染的每个组件的计时信息。和即将推出的 time slicing and suspense 完美适配

时间：2018/10/23

React memo 当 props 没有改变的是糊，就可以跳过组件 render 阶段，只对函数组件有用。对于类组件，可以使用 PuerComponent 或者 ShouldComponentUpdate
React.lazy 与 Suspense 结合，可以达到代码分割的功能（可以正式使用了）
static contextType 可以更方便的，更符合人体工程学地，让开发者在类组件中获取 context 内容
static getDerivedStateFromError，可以在自组件抛出错误的时候，让当前组件可以在 render 函数完成之前（commit 阶段）渲染新的 DOM。不同于 componentDidCatch，该函数会在 commit 阶段被调用，并且现在不支持在componentDidCatch中调用 setState
可以尝试使用不稳定的并发模式功能，通过ReactDOM.unstable_createRoot

时间：2019/02/06 超级经典的版本

重命名不安全的生命周期方法。（在 16.3 似乎已经重命名了，为什么这里还要提一嘴）
单元测试中， act 函数支持异步函数了。在 16.8 的 act 函数中，如果使用了异步函数，还是会报警告：An update to SomeComponent inside a test was not wrapped in act(...).现在不会了
性能测试 API React.Profiler。一个（字符串）和一个 onRender 回调（函数），每当树中的组件“提交”更新时，React 都会调用它们。其目的是帮助识别应用程序中速度较慢的部分

时间：2020/10/20 还是没有正式支持 concurrent 模式

没有新功能，使用 React 17.0.0，相当于享受到了 react 16 版本所有的功能，并且没有额外的大功能。这是一个垫脚石版本

不过还是有些小更新的：

DOM 事件挂在 React 根 DOM 上，而不是 document 上。可以在一个页面上放多个 react 项目了。并且之前在 react 回调函数中调用 e.stopProgation(),对直接绑定在 document 上的原生事件无效，现在可以了。如果还是需要监听在 document 上的事件，可以考虑使用 capture。
删除了事件池，即在事件处理中的异步获取 e 对象的属性，将会失败
在 forwardRef 和 memo 中返回 undefined 报错。在 react 16 版本中，只会对类和函数组件报错

2021/06/08

在 react 18 中，并不会全部采用并发模式，为了能够让开发者不改动代码，或者最少的更改，直接升级 React18，只针对其中个别 API 采用了并发渲染。所以React 18 中的并发性是可选的

并发模式是指什么？指低优先级的任务会被高优先级的任务打断，等高优先级任务执行完了，低优先级任务会继续执行。startTransition 就是这样一个 API，里面包裹的任务被赋予了低优先级

2020/03/29 正式发布

自动批处理。在 react18 之前，promise，setTimeout，原生应用的事件处理程序，都不会被批量处理；但现在这些更新内容都会自动批处理
startTransition 过渡更新，将任务区分为紧急和非紧急的更新
支持了服务端的 Suspense
新创建根节点的方法，ReactDOM.createRoot()
新严格模式的行为，会对新挂载组件挂载两次
增加了新 Hook，useId，useTransition，useDeferredValue，useSyncExternalStore，useInsertionEffect

说了很多年的并发模式和 Suspence 终于实现了，真不容易。

看完本篇文章，你是否和我一样，有很大的收获呢？