React 19 带来了 JSX 运行时的重要更新

在 React 的发展历程中,JSX 运行时一直扮演着重要的角色。在以前的的版本,JSX 运行时会克隆传入的 props 对象,这背后有着两大原因。

历史原因

React 保留了一些特殊的 prop 名称,如 key 和在 React 19 之前的 ref。这些 prop 并非普通属性,而是 React 内部机制的一部分,它们不会在目标组件中直接可见。

React 在将 props 对象传递给用户组件之前,会利用这些特殊的 prop 进行内部处理,然后再从 props 对象中移除它们。

传统的 JSX 运行时 createElement 函数不仅作为编译器的目标,同时也是一个公共 API,可以手动调用。这意味着我们不能确保传递给 createElementprops 对象在传递后不会被用户空间的代码修改。为了确保 props 对象的稳定性和一致性,JSX 运行时选择了克隆传入的对象。

React 19

随着 React 的不断进步,新的 JSX 运行时机制发生了变化。它不再是一个公共 API,而是专属于编译器的目标。编译器在传递 props 时,总是创建一个新的内联对象。除了保留的 prop 名称外,克隆 props 的必要性大大降低。

在 React 19 中,我们见证了进一步的改进。ref 不再作为保留的 prop 名称,而 key 仅在将其展开到元素上时才会被特殊处理。

如果 key 是静态定义的,编译器会将其作为单独的参数传递给 jsx 函数,而不是作为 props 对象的一部分。克隆 props 对象的唯一剩余原因变得更加罕见,即当 key 被展开到元素上时,尽管这种情况会引发警告。

在未来的 React 版本中,我们计划进一步优化这一机制。我们将不再从 props 对象中删除展开的 key,但仍然会发出警告,以提醒开发者注意潜在的问题。

这样我们就可以直接传递原始的 props 对象,减少不必要的克隆操作。这一改进带来的预期影响是 JSX 元素创建速度的显著提升。

在大多数应用中,JSX 元素的创建占据了渲染过程的重要部分,因此这一优化将直接提升应用的性能。无论是用户界面的响应速度,还是整体应用的流畅度,都将得到显著的提升。

总结

React 19 带来了革命性的 JSX 元素创建速度提升。升级到最新版本,你将能够享受到更快的应用性能,为你的用户带来更加流畅和高效的体验。不要错过这一重要的性能优化机会,让 React 19 为你的应用注入新的活力!

相关推荐
拉不动的猪9 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程19 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常42 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴44 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端