React17|React17 与React16 变化这些 React17与React16变化这些

新的JSX转换 React 16原理
babel-loader会预编译JSX为React.createElement(...)
React 17原理
React 17中的 JSX 转换不会将 JSX 转换为 React.createElement，
而是自动从 React 的 package 中引入新的入口函数并调用。
另外此次升级不会改变 JSX 语法，旧的 JSX 转换也将继续工作。
总结
React 17支持新的JSX转换。我们还将对它支持到React 16.14.0，React 15.7.0和0.14.10。
需要注意的是，这是完全选择启用的，您也不必使用它。
之前的JSX转换的方式将继续存在，并且没有计划停止对其支持。
事件代理更改在React 17中，React将不再在后台的文档级别附加事件处理程序。取而代之的是，它将它们附加到渲染您的React树的根DOM容器：

const rootNode = document.getElementById('root'); ReactDOM.render(, rootNode);

文章图片

总结
在React 16和更早的版本中，React将对大多数事件执行document.addEventListener（）。
React 17将在后调用rootNode.addEventListener（）。
渐进式升级 React v17 开启了 React 渐进式升级的新篇章。当你从 React 15 升级至 16 时（或者，从 16 升级到 17），你通常会一次性升级整个应用程序，这对大部分应用来说十分有效。但是，如果代码库编写于几年前，并且没有及时的维护升级，这会使得升级成本越来越高。并且，在 React 17 之前，如果在同一个页面上使用不同的 React 版本（可以这么做，但是有风险），会导致事件问题的出现，会有一些未知的风险。
我们正在修复 React v17 中的许多问题。这意味着，当 React 18 或未来版本来临时，你将有更多选择。首选，当然还是一次性升级整个应用；但你还有个可选方案，渐进式升级你的应用。举个例子，你可能将大部分功能升级至 React v18，但保留部分懒加载的对话框或子路由在 React v17。
但这并不意味着你必须进行渐进式升级。对于大多数应用来说，一次性升级仍是更好的选择。加载两个版本的 React，仍然不是理想方案 —— 即使其中一个版本是按需加载的。但对于那些长期未维护的大型应用来说，这意义非凡，React v17 开始让这些应用不会被轻易淘汰。
【React17|React17 与React16 变化这些】我们准备了示例仓库，此示例演示了如何在必要时懒加载旧版本的 React。此示例由 Create React App 构建，使用其他工具也可以实现同样的效果。欢迎使用其他工具的小伙伴通过 PR 的形式提供 Demo。