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

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

历史原因

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

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

传统的 JSX 运行时 createElement 函数不仅作为编译器的目标，同时也是一个公共 API，可以手动调用。这意味着我们不能确保传递给 createElement 的 props 对象在传递后不会被用户空间的代码修改。为了确保 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 为你的应用注入新的活力！