React 18 中的主要功能

您是网络开发人员吗？如果是，那么你一定知道 React 是一个非常流行的 JavaScript 库。有大量的公司正在研究它。每种网络技术都会逐渐更新。 React 团队已经开始研究 React 18，这将是主要版本之一。这个版本被称为 React 18 Alpha。

现在你认为这个新版本可能会带来重大变化，你必须学习很多新东西，所以这是不正确的。 React 团队创建了一个工作组，通过接收多个反馈并实施它们来逐步采用 React 18 中的新功能。因此，让我们开始使用 React 18 Alpha 中添加的功能。

现在让我们了解一下 React 18 中的一些新特性。

1.并发：并发是同时执行多个任务的能力。假设用户正在单击或键入 React 组件，同时动画正在另一个 React 组件中的组件中播放。在这里，当用户键入或单击按钮时，动画在 React 的上下文中呈现。

现在在以前的版本中，React 同时管理所有这些钩子调用、函数调用等，因此用户感觉应用程序正在备货。为了解决这个问题，有一个调度程序，其主要任务是调用这些回调并确定这些回调的优先级。但是现在 React 团队正在提供 Transition API，React 通过它可以将事件循环的一些控制权交给用户

2.Transition API：正如上面所讨论的，Transition API 提供了对并发性的控制。 startTransition API 允许开发人员指向 React 哪些操作可能会阻塞线程并导致屏幕延迟。同样，React 提供了一个称为 useTransition 的新钩子。当转换挂起时，它会非常有助于显示加载器。因此，如果您想知道何时应该转换 API，那么答案是无论您在哪里发现渲染阻塞进程或网络调用都尝试使用这些。

3. Suspense API：为了提高 React 在服务端渲染上下文中的性能，React 团队做了很多改动。所以现在，你可能会有一个问题，什么是服务器端渲染的上下文？所以这是一种在服务器上将 JavaScript 数据渲染为 HTML 的方式。这一切都是为了节省前端的计算时间，并有助于更快地加载起始页面。

在这里，为了将您的应用程序分解为更小的独立单元，您可以使用 Suspense API。 Server-Side Rendering 中包含 4 个步骤，Suspense API 将独立执行这些步骤，不会阻塞其余的应用程序。

• 为服务器上的每个组件获取数据。
• 整个应用程序在发送到服务器上的客户端之前呈现为 HTML。
• 在客户端获取整个应用程序的 JavaScript 代码
• Hydration – JavaScript 将 React 连接到客户端上的服务器生成的 HTML

4. 自动批处理：批处理只是意味着将所有状态更新组合到一个渲染中。 在 React 17 和更早的版本中，在浏览器事件期间以单击的形式进行批量重新渲染更新。如果您需要下载数据并更新其状态，React 17 将不会收集重新分发。反应 18 如果您使用新的根 API，所有状态更新都会在发生时自动更新。此外，承诺、超时或其他事件处理程序也将利用这一点。无论发生在哪里，它都会进行状态更新。它肯定会为我们的应用程序带来更好的性能。

5.新的根 API：在 React 18 之前，在 reactDOM.render 方法中，我们使用传递主 App 组件，然后使用 document.getElementById，我们使用存在于 index.html 中的根元素。所以我们实际上在做的是将应用程序组件渲染到页面的根元素中。但是现在我们首先必须使用在根元素中传递的 createRoot 方法创建根，然后我们调用 root.render 来传递应用程序组件。