react v18新特性 分享

Concurrency React

博客部分翻译

并发本身不是一个特性。这是一种新的幕后机制，使 React 能够同时准备多个版本的 UI。您可以将并发视为一个实现细节——它之所以有价值，是因为它解锁了一些功能。 React 在其内部实现中使用了复杂的技术，例如优先级队列和多重缓冲。但是您不会在我们的公共 API 中的任何地方看到这些概念。

当我们设计 API 时，我们试图向开发人员隐藏实现细节。作为一名 React 开发人员，您专注于您希望用户体验的样子，而 React 负责处理如何提供这种体验。所以我们不期望 React 开发人员知道并发是如何工作的。

然而，Concurrent React 比典型的实现细节更重要——它是对 React 核心渲染模型的基础更新。因此，虽然了解并发的工作原理并不是非常重要，但可能值得在高层次上了解它是什么。

Concurrent React 的一个关键属性是渲染是可中断的。当你第一次升级到 React 18 时，在添加任何并发特性之前，更新的渲染方式与之前版本的 React 相同——在一个单一的、不间断的、同步的事务中。使用同步渲染，一旦更新开始渲染，在用户可以在屏幕上看到结果之前，没有任何东西可以中断它。

在并发渲染中，情况并非总是如此。 React 可能会开始渲染更新，在中间暂停，然后再继续。它甚至可能完全放弃正在进行的渲染。 React 保证即使渲染被中断，UI 也会保持一致。为此，它会等待执行 DOM 突变，直到完成整个树的评估。有了这个能力，React 可以在后台准备新的屏幕而不阻塞主线程。这意味着 UI 可以立即响应用户输入，即使它处于大型渲染任务的中间，从而创造流畅的用户体验。

另一个例子是可重用状态。 Concurrent React 可以从屏幕上删除部分 UI，然后在重用之前的状态时将它们添加回来。例如，当用户从一个屏幕上移开并返回时，React 应该能够将前一个屏幕恢复到与之前相同的状态。在即将到来的次要版本中，我们计划添加一个名为 Offscreen 的新组件来实现此模式。同样，您将能够使用 Offscreen 在后台准备新的 UI，以便在用户显示之前准备好。

并发渲染是 React 中一个强大的新工具，我们的大多数新功能都是为了利用它而构建的，包括 Suspense、过渡和流式服务器渲染。但是 React 18 只是我们在这个新基础上构建目标的开始。

什么是Concurrent 模式

Concurrent 模式是一组 React 的新功能，可帮助应用保持响应，并根据用户的设备性能和网速进行适当的调整。

为了让应用保持响应，我们需要先了解是什么在制约应用保持响应?

我们日常使用App，浏览网页时，有两类场景会制约保持响应：

• 当遇到大计算量的操作或者设备性能不足使页面掉帧，导致卡顿。
• 发送网络请求后，由于需要等待数据返回才能进一步操作导致不能快速响应。

这两类场景可以概括为：

• CPU的瓶颈
• IO的瓶颈

CPU的瓶颈

当项目变得庞大、组件数量繁多时，就容易遇到CPU的瓶颈。看看一下DEMO

import React, {
    useState } from "react";
import "./styles.css";

export default function App() {
   
  const [content, setContent] = useState("");
  const [value, setInputValue] = useState("");

  return (
    <div>
      <div>
        <input
          value={
   value}
          onChange={
   (e) => {
   
            setInputValue(e.target.value);
            setContent(e.target.value);
          }}
        />
      </div>
      {
   Array.from(new Array(30000