随着 React 17 的发布，我们会惊讶地发现，v17 版本的最大特性是无新特性。因为它没有添加任何面向开发人员的新功能，而是专注在了如何简化 React 本身的升级。
React 17 可以说是发挥了「跳板」的作用，它将使由一个版本的 React 管理的树嵌入到由另一个版本的 React 管理的树中更加安全。也就是说在不远的将来，使用 React 17 及以上的项目在升级的时候可以考虑部分模块仍然使用 V17 的版本。
那让我们来一起看看 V17 版本都做了些什么？
渐进式升级
React 17 支持逐步的 React 升级。
在 React 17 之前，React 升级必须整个应用升级到指定版本，不能一个应用中存在两个 React 版本。但是，如果代码比较陈旧，并且没有得到很好的维护，则升级的挑战会更大。
可能有人会问，为什么我们不可以在页面上使用两个 React 版本？
因为在页面上使用两个版本的 React ，可能会导致事件问题。在下面的 事件变更 中会详细讲到。
当 React 17 发布之后，在下一个版本问世时，带来了更多的选择。我们可以不必像以前一样，可以选择逐个升级应用程序。例如，您可以决定将大部分应用程序迁移到 React 18，但在 React 17 上仍然保留一些不常变动的页面或子路由。
但是，这不意味着您必须逐步升级。
对于大多数应用程序，全部升级仍然是最好的解决方案。但是，对于没有积极维护的大型应用程序，可以考虑使用逐步升级，并且新版本的 React 也可以使这些应用不落伍。
React 若想逐步升级，就应该启用渐进式的更新，所以需要对 React 事件系统进行一些更改。
事件变更
React 17 将事件处理附加到 rootNode 上，而不是 document 上。
由上图可以发现，在 React 16 及以前，React 对事件执行 document.addEventListener()，而在 React 17 以后，React 对根 DOM 执行 rootNode.addEventListener()。
也就是说，在 React 17 中，React 将不再在 document 级别 attach 事件处理器，而是 attach 到 React 渲染树的根 DOM 容器中：
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
这么做的原因是什么呢？
在 React 17 以前，所有的事件会被附加到 document 上，并为它建一个处理器，当 DOM 事件触发时，会向上冒泡，一直到 document 级别，也就是附加事件处理器的地方，事件会得到响应。
如果页面上有多个 React 版本，事件都会被附加在 document 上。这时嵌套的 React 树调用 e.stopPropagation() 停止了事件冒泡，外部的树仍会接收到该事件，这就使嵌套不同版本的 React 难以实现。
React DOM 变更
禁止在 onScroll 事件时冒泡。
React onFocus 和 onBlur 事件已转换为浏览器下的原生 focusin 和 focusout 事件，这与 React 的现有实现更为接近，有时还能提供额外的信息。
将所有 Capture 事件都使用浏览器的捕获阶段实现。
异步运行 useEffect 清理函数。
useEffect(() => {
return () => {
// 清理函数
};
});
在 React 16 中，effect 的清理函数会同步运行，在大型应用中大量的数据变更会减慢屏幕变换的速度，而且，大多数 effect 都不需要延缓屏幕的更新。
在 React 17 中， effect 清理函数是异步运行的。并且，React 17 会根据 effect 在树中的位置，以相同的顺序执行清理函数。以前，这个顺序会有所不同。
例如，如果要卸载组件，清理函数将在屏幕更新后运行。
如果希望同步执行，这时你可以使用 useLayoutEffect。
- 移除事件池。
function onChange(e) {
setData(data => ({
...data,
text: e.target.value
}));
}
在 React 16 及更早版本中，React 为了提高性能复用了不同事件之间的事件对象，并将所有事件字段高为 null。在上面代码中若想正确使用，须得调用 e.persist()。
而在 React 17 中，上面代码可以好好地运行。
- 如果 forwardRef 或 memo 组件的返回值为 undefined，则抛出异常。
const Button = forwardRef(() => {
<button />;
});
const Button = memo(() => {
<button />;
});
上面代码中，React 17 会把它标记为 error 而非忽略它。
在 React 16 及更早版本中，React 仅会对类和函数组件返回 undefined 时会当成错误，但不检查 forwardRef 和 memo 组件的返回值。
而在 React 17 中，对 forwardRef 和 memo 组件的处理与普通函数和类组件一致，即在它们返回 undefined 会被视为错误。
移除 React Native Web 不需要的内部组件。
弃用未记录且具有误导性的 ReactTestUtils.SimulateNative API。
修复当 dangerouslySetInnerHTML 为 undefined 时，误报警告的问题。
React DOM Server
使用服务端渲染的 useCallback 与 useMemo 一致。
修复函数组件抛出异常时状态泄露的问题。
