关于react.js:React17-与React16-变化这些

38次阅读

共计 1175 个字符,预计需要花费 3 分钟才能阅读完成。

新的 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(<App />, 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 开始让这些利用不会被轻易淘汰。

咱们筹备了示例仓库,此示例演示了如何在必要时懒加载旧版本的 React。此示例由 Create React App 构建,应用其余工具也能够实现同样的成果。欢送应用其余工具的小伙伴通过 PR 的模式提供 Demo。

** 留神 ** 咱们将其余个性推延到了 React v17 之后。这个版本的指标就是实现渐进式降级。如果降级到 17 很艰难,那就违反了此版本的目标。

正文完
 0