当前位置: 首页 > Web前端 > JavaScript

React17和React16改变这些

时间:2023-03-27 18:15:39 JavaScript

新的JSX转换React16原理babel-loader将JSX预编译为React.createElement(...)React17原理React17中的JSX转换不会将JSX转换为React.createElement,而是自动从React包中引入并调用新的入口函数。此外,这次升级不会改变JSX语法,旧的JSX转换将继续有效。总结React17支持新的JSX转换。我们将支持它直到React16.14.0、React15.7.0和0.14.10。请注意,这是完全选择加入的,您不必使用它。之前改造JSX的方式会继续存在,也没有停止支持的打算。事件委托更改在React17中,React将不再在幕后的文档级别附加事件处理程序。相反,它将它们附加到呈现React树的根DOM容器:constrootNode=document.getElementById('root');ReactDOM.render(,rootNode);总结在React16及更早版本中,React会为大多数事件执行document.addEventListener()。React17之后会调用rootNode.addEventListener()。增量升级Reactv17开启了React增量升级的新篇章。当您从React15升级到16(或者,从16升级到17)时,您通常会一次性升级整个应用程序,这对大多数应用程序来说都很好。但是,如果代码库是几年前写的,没有及时维护和更新,这会使升级成本越来越高。并且,在React17之前,如果在同一个页面使用不同的React版本(可以这样做,但是有风险),会导致事件问题,会存在一些未知的风险。我们正在修复Reactv17中的许多错误。这意味着当React18或未来版本到来时,你将有更多选择。首选当然是一次升级整个应用程序;但您也可以选择逐步升级您的应用程序。例如,您可能会将大部分功能升级到Reactv18,但在Reactv17中保留一些延迟加载的对话框或子路由。但这并不意味着您必须进行增量升级。对于大多数应用程序,一次性升级仍然是更好的选择。加载两个版本的React仍然不理想——即使其中一个版本是按需加载的。但是对于那些长期没有维护的大型应用来说,这意义重大。Reactv17开始让这些应用不容易被淘汰。我们准备了一个示例存储库,演示如何在必要时延迟加载旧版本的React。本示例是使用CreateReactApp构建的,使用其他工具也可以达到同样的效果。欢迎使用其他工具的朋友以PR的形式提供demo。**注意**我们将其他功能推迟到Reactv17之后。此版本的目标是实现增量升级。如果升级到17很困难,那就违背了这个版本的目的。