React 18 最新版本介绍

2024 年 10 月 16 日

React 是一个用于构建用户界面的开源 Javascript 前端库。React 易于学习，运行速度快，效率高，尤其是在创建可扩展且可重复使用的 UI 组件方面。 

React 团队已经完成了对即将推出的 React 18 强大版本的发布计划的声明。该版本目前处于测试阶段。

我们将在本文中通过代码示例讨论 React model 18 的一些顶级功能更新。

引入新的 Root API 

React 中的根是指渲染树的顶层数据形状。在 React 18 中，我们将拥有两个根 API：旧根 API 和新根 API。 

旧版 Root API 

旧版根 API 是当前称为 ReactDOM.render 方法的 API。旧版根 API 的使用方式与 React 版本 17 中的相同，它将在旧版模式下创建一个根运行。在深入研究 React 18 之前，将对旧版根 API 的使用提出警告。它将逐步实施新根 API 的使用。旧版根 API 将在即将推出的版本中弃用。

您可以参考下面给出的代码示例：

新的 Root API

新的根 API 可以通过以下方式查看 ReactDOM 创建了一个 Root 方法。我们必须首先通过 createRoot 方法创建 root，并将 root 属性作为应用它的对象。然后我们必须调用 root.render 方法并跳过 app 对象作为参数。通过使用新的 root API，我们可以使用 React 18 中提供的所有并行和并发功能。

您可以参考以下代码

水合物方法的变化

渲染方法和 hydrate 方法类似。但它允许将事件监听器连接到容器内的 HTML 元素，这些元素是使用服务器端的 ReactDOM 服务器方法渲染的。React 18 使用 hydrate root 方法取代了此 hydrate 方法。

渲染回调的变化

从全新的根组件开始，API 渲染回调被移除。但我们可以将其作为属性传递给根组件。

从新的根开始，API 渲染回调已被移除。

自动配料的改进

在 React 18 中，批处理功能将多个国家/地区更新合并为一个合并的重新渲染，以提高性能。例如，如果您在一个简单的功能处理程序中更新多个国家/地区费用。然后，react18 会将这些更新批处理为单个更新，并且只重新渲染一次应用程序，而不是多次调用渲染方法。 

使用此方法，应用程序的整体性能将得到显著提升。它还可以防止添加物呈现不完整的国家/地区更新，即只更新一个国家/地区变量，这也可能导致应用程序内部出现不当行为。

React 开发公司将自动整合所有国家/地区更新，无论它们来自何处。因此，如果任何更新在超时、承诺、本地事件处理程序或其他事件中，React 18 版本将以与更新内部 React 事件相同的方式对其进行批处理。与之前的 React 版本相比，这还将改善应用程序的性能并减少对附加组件的重新渲染。

禁用自动批处理

有时，我们需要在每次状态改变后立即重新提供组件。在这种情况下，要禁用自动批处理，请使用 flushSync 方法。

悬念

我们可以在 通过首先在服务器上渲染所有组件来响应本机开发服务。然后，我们需要将结果作为 HTML 元素发送到浏览器。 

React 会像浏览器一样加载 JavaScript。然后它会将服务器生成的 HTML 元素与 JavaScript 和 Hydration 逻辑连接起来。

通过服务器端渲染（SSR），我们可以在 JavaScript 程序加载和运行之前查看页面内容。

Suspense 特性在 React Native 开发中会延迟组件的渲染，它是在 React 16.6 版本中首次引入的，带有积极的阻碍和对 Suspense 渲染的简单辅助。

React 18 的稳定版本将支持基于并发功能的成熟悬念功能，以及以下内容：

• 延迟过渡：它指示组件等待数据解析完毕后再进行新的状态转换。
• 占位符节流：通过减少 UI 抖动来限制嵌套占位符和连续占位符组件的出现。
• 暂停列表：按照这些组件需要向用户显示的顺序排列组件是通过SuspendList来完成的。

与之前的版本相比，React 18 对悬念的处理有所不同。这似乎是一个重大变化。但是，通过自动批处理，更改的影响很小。应用程序向 React 18 版的迁移过程不会受到影响。 

React 16 和 17 中的 Suspense 之前被称为 Legacy Suspense，React 18 中改进后的 Suspense 被称为 Concurrent Suspense。

总体而言，除了解析暂停组件的方法外，传统和并发暂停功能都提供了相同的基本用户体验，如下例所示。

以下是一个简单的例子，说明悬疑因素如何在新旧 React 18 版本中发挥作用：

• 旧式挂起将直接将同级元素挂载到 DOM。其生命周期钩子/结果也将被触发。它不会等待挂起的组件被解析。
• 与传统 Suspense 相比，并发 Suspense 不会将同级元素挂载到 DOM，也不会触发其生命周期钩子/结果，直到挂起的组件得到解决。传统 Suspense 中存在的所有问题都可以通过这些新改进得到解决。

并发

并发可以帮助您同时执行多个任务。例如，如果我们采用标准的 React Native 应用开发服务。当我们在组件中执行动画操作时，并发允许在同一时间点与 React 组件进行 UI 交互。

以前，所有更新都具有相同的优先级，并且只能更新一个设置状态。启动转换 API 帮助新的并发功能将所有更新标记为非紧急。React 将根据给定的优先级中断或暂停它们。

结语

我们尽力提供最好的信息，希望上述信息对您有所帮助。对于开发者社区，React 18 稳定版将带来一组令人兴奋的新功能。关键的关注点在于并发性和缓慢升级到更现代的模型。由于其仍处于测试阶段， React Native 开发公司 成立了运营机构来构建向新模式顺利过渡的环境。