【转】详解 React 18 更新后的特性

前端


React 18 通过其改进的渲染系统带来了并发能力，并在此基础上构建了转换或自动批处理等性能增强特性。下面就看看到底有哪些值得关注的新特性。

迭代更新内容

总的来说，由于新的并发特性是渐进适配并按需启用的，React 18 中的重大更改仅限于几个简单的 API 更改，以及对 React 中多个行为的稳定性和一致性的一些改进，比较重要的一点是，不再支持 IE 浏览器。

1、客户端渲染 API

带有 createRoot() 的 root API，替换现有的 render() 函数，提供更好的人体工程学并启用新的并发渲染特性。

1
2
3
4
5
6
import { createRoot } from "react-dom/client";
import App from "App";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

请注意，这个新的 API 现在已从 react-dom/client 模块导出，卸载和水合 API 也发生了变化。

1
2
3
4
5
6
7
8
9
10
// Unmount component at DOM node:
// ...
root.unmount();

// Hydration
import { hydrateRoot } from "react-dom/client";
// ...

const container = document.getElementById("app");
const root = hydrateRoot(container, <App tab="home" />);

由于使用 Suspense 时会出现不正确 timing 的问题，渲染回调已经一去不复返了。替代选择是顶部组件内部的一个效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createRoot } from "react-dom/client";
import { useEffect } from "react";
import App from "App";

const App = () => {
  useEffect(() => {
    console.log("render callback");
  });

  return <div></div>;
};
const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);
2、自动批处理

createRoot() API 还是 React 18 中另一个改进的入口——自动批处理。在 React 的早期版本中，状态更新在 React 事件侦听器中完成时已经批量处理了，以优化性能并避免重渲染。从 React 18 开始，状态更新也将被安排到其他地方——比如在 Promise、setTimeout 回调和原生事件处理程序中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const App = () => {
  const handleClick = () => {
    setA((a) => a + 1);
    setB((b) => b - 1);
    // Updates batched - single re-render
  };

  setTimeout(() => {
    setA((a) => a + 1);
    setB((b) => b - 1);
    // New (v18): Updates batched - single re-render
  }, 1000);

  // ...
};

这个更改虽然一般来说符合人们期望，也挺有用，但可能是破坏性的。如果你的代码依赖于在分开的状态更新之间重渲染的组件，那么你必须使其适应新的批处理机制，或使用 flushSync() 函数来强制立即刷新更改。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { flushSync } from "react-dom";
// ...

const handleClick = () => {
  flushSync(() => {
    setA((a) => a + 1);
  });
  // Re-render
  flushSync(() => {
    setB((b) => b - 1);
  });
  // Re-render
};
3、严格模式更新

React 18 带来了大把新特性，此外还有很多新特性正在路上。为了让你的代码为此做好准备，StrictMode 变得更加严格了。最重要的是，StrictMode 将测试组件对可重用状态的弹性，模拟一系列的挂载和卸载行为。它旨在让你的代码为即将推出的特性（可能以组件的形式）做好准备，这将在组件的挂载周期中保留这个状态。

虽然它肯定会在未来提供更好的性能，但就目前而言，启用 StrictMode 时必须要考虑这个事情。

除了以上提到的更改之外，根据你的 React 代码库，你可能还会发现其他一些更改。

值得一提的是，React 18 将不再支持 IE 浏览器，因为 React 18 现在依赖很多现代浏览器特性，如 Promise 或 Object.assign。

其余的更改与一些 React 行为的稳定性和一致性有关，不太可能影响你的代码库。

4、并发的 React

并发渲染器是 React 渲染系统的一项幕后特性。它允许并发渲染，即同时在后台准备多个版本的 UI。这意味着更好的性能和更平滑的状态转换。

虽然并发似乎只是一个实现细节，但其实它是大多数新特性的动力源泉。事实上，只有当你使用其中一种特性（如 transition、Suspense 或流式 SSR）时，才会启用并发渲染。这就是为什么了解并发渲染的工作机制是非常重要的。

5、Transition

Transition 是由并发渲染提供支持的新特性之一。它旨在与现有状态管理 API 一起使用，以区分紧急和非紧急状态更新。通过这种方式，React 知道哪些更新需要优先考虑，哪些更新需要在后台通过并发渲染准备。

要知道何时使用 transition，你必须更好地了解用户是如何与你的应交互的。例如，在字段中键入或单击按钮是用户期望立即获得响应的操作——响应可能是出现在文本字段中的一个值，或是要打开的某个菜单。但对于搜索、加载或处理数据（例如搜索栏、图表、过滤表等）这些事情，用户也会期望它们需要一些时间来完成。后者就是你使用 transition 的场景了。

可以使用 useTransition() 钩子来创建一个 transition。这个钩子返回一个函数来启动一个 transition，还有一个挂起的指示器来通知你 transition 的进度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { useTransition, useState } from "react";

const App = () => {
  const [isPending, startTransition] = useTransition();
  const [value, setValue] = useState(0);

  function handleClick() {
    startTransition(() => {
      setValue((value) => value + 1);
    });
  }

  return (
    <div>
      {isPending && <Loader />}
      <button onClick={handleClick}>{value}</button>
    </div>
  );
};

在 startTransition() 回调中提交的任何状态更新都将被标记为 transition，从而使其他更新具有优先权。如果你不能使用这个钩子，还有一个单独的 startTransition() 函数可用——虽然它不会通知你转换的进度。

1
2
3
4
5
6
import { startTransition } from "react";
// ...
startTransition(() => {
  // Transition updates
});
// ...
6、Suspense 更新

与 React Suspense 结合使用时，transition 的效果是最好的。由于一些改进，Suspense 现在可以很好地与并发渲染集成、在服务器上工作，并且可能很快支持 lazy() 加载组件之外的用例。与 transition 一起使用时，Suspense 将避免隐藏现有内容。考虑以下示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Suspense } from "react";
// ...

const App = () => {
  const [value, setValue] = useState("a");
  const handleClick = () => {
    setValue("b");
  };

  return (
    <>
      <Suspense fallback={<Loader />}>
        {value === "a" ? <A /> : <B />}
      </Suspense>
      <Button onClick={handleClick}>B</Button>
    </>
  );
};

在状态改变时，lazy() 加载的组件将触发 Suspense，导致 fallback 元素的渲染。如果你将状态更改标记为一个 transition，React 将知道它应该在后台准备新视图，同时仍保持当前视图可见。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Suspense, useTransition } from "react";
// ...

const App = () => {
  const [value, setValue] = useState("a");
  const [isPending, startTransition] = useTransition();
  const handleClick = () => {
    startTransition(() => {
      setValue("b");
    });
  };

  return (
    <>
      <Suspense fallback={<Loader />}>
        <div style={{ opacity: isPending ? 0.7 : 1 }}>
          {value === "a" ? <A /> : <B />}
        </div>
      </Suspense>
      <Button onClick={handleClick}>B</Button>
    </>
  );
};

现在，即使在处理 transition 时视图不会改变，你仍然可以使用过渡指示器来向用户提供反馈，例如设置容器不透明度。将上述改进与未来 Suspense 的新能力（与 lazy() 加载的组件之外的异步任务一起使用）相结合，意味着 Suspense 将成为 React 最强大的特性之一。

7、服务端渲染改进

除了 Suspense 支持之外，React 的 SSR 方面还有很多其他变化。将 Suspense 与 SSR 流式传输和懒惰水合（lazy hydration）相结合，意味着你的服务端渲染应用将尽快水合并可用。不仅如此，零打包体积的服务端组件即将到来。它们目前处于试验阶段，但可能会在以后的次要版本中进入稳定状态。使用它们时，你将能减少提供给客户端的 JS 代码，甚至进一步优化 React 应用程序的性能和加载时间。

React 17 的多个更改，即使你的代码库很大，你也应该能够轻松地逐步采用 React 18。你不仅可以在应用程序的选定部分中使用新版本，还可以从 render() 迁移到 createRoot()，来一步步选择加入新的特性和行为。最重要的是，即使使用的是 createRoot()，你仍然可以逐步采用并发渲染，因为它只有在你使用它的特性时才会启用。总体而言，迁移过程应该很顺利。

对 React 的展望
React 18 带来了许多新特性，可以看到一些即将出现的新事物。服务器组件、用于数据获取的 Suspense，和组件渲染都是接下来的新特性的一部分。React 正在与它的整个生态系统一起发展，迫不及待地想看看接下来会发生什么。

翻译：https://blog.openreplay.com/react-18-features-breakdown

涅槃快乐热爱生活，追求技术

个人简介。