先说明一下：React 18在本文写作时（2022年1月）尚未正式发布，目前是RC（Release Candidate）版本，预计2022年春季正式发布。本文基于React 18 RC版本的特性，深入分析并发渲染的架构设计。

React 18是React的一个大版本，最大的变化是引入了并发渲染（Concurrent Rendering）。这不是一个新功能，而是一种底层架构的改变，让React能够同时准备多个版本的UI，实现更流畅的用户体验。

并发渲染带来了很多新特性：自动批处理、Suspense SSR、Transitions、useDeferredValue、useTransition等。这些特性能让应用在高并发、大数据量的场景下保持流畅。

我研究React 18有一段时间了，也在项目中试用了RC版本。今天深入分析React 18并发特性的架构设计，包括核心原理、关键API、使用场景和注意事项，帮你理解并用好React 18。

一、React 18的核心变化：并发渲染

在说具体特性之前，先理解什么是并发渲染。

React 17及之前的渲染模式：同步渲染

在React 17及之前，渲染是同步的、不可中断的。一旦开始渲染，就必须把整个组件树渲染完，不能停下来。如果组件树很大，渲染时间长，主线程就被占用了，用户的交互（输入、点击）就会被阻塞，感觉卡顿。

比如用户在一个大列表的搜索框里输入，每次输入都要触发整个列表的重新渲染，渲染需要几百毫秒，这期间用户的输入就会卡顿，体验很差。

React 18的并发渲染：可中断的渲染

React 18引入了并发渲染，渲染是可中断的。React可以在渲染过程中暂停，去处理更紧急的任务（比如用户输入），然后再回来继续渲染，或者放弃当前渲染重新开始。

这就意味着，React可以同时准备多个版本的UI。比如用户输入时，React可以先更新输入框的内容（紧急更新），然后在后台慢慢更新搜索结果列表（非紧急更新）。用户输入不会卡顿，搜索结果准备好后再更新。

并发渲染不是同时渲染多个东西（不是多线程），而是React可以控制渲染的优先级和节奏，让高优先级的更新先执行，低优先级的更新可以被中断和延迟。

启用并发渲染

并发渲染不是默认开启的，需要用createRoot代替ReactDOM.render：

// React 17
ReactDOM.render(<App />, document.getElementById('root'));

// React 18
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

用了createRoot之后，就自动启用了并发渲染的能力，以及自动批处理等特性。

二、自动批处理（Automatic Batching）

这是React 18最容易感知到的变化。

什么是批处理？

批处理就是React把多个状态更新合并成一次重新渲染，减少渲染次数。

在React 17中，只有React事件处理函数里的更新会被批处理。在setTimeout、Promise回调、原生事件里的更新，不会被批处理，每次更新都会触发一次渲染。

// React 17: 事件处理函数里，两次更新合并成一次渲染
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 只渲染一次
}

// React 17: setTimeout里，两次更新触发两次渲染
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 渲染两次！
}, 1000);

React 18的自动批处理

React 18里，所有更新都会自动批处理，不管是在事件处理函数、setTimeout、Promise还是原生事件里：

// React 18: 不管在哪里，都自动批处理
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 只渲染一次！
}, 1000);

这能减少不必要的渲染，提升性能。尤其是在异步请求回调里更新多个状态的场景，性能提升明显。

如果不想批处理怎么办？

如果有特殊需求，想让某个更新立刻执行（不批处理），可以用flushSync：

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  // 上面的更新已经触发渲染了
  setFlag(f => !f);
}

但一般不需要用flushSync，自动批处理对大多数场景都是有利的。

三、Transitions：区分紧急和非紧急更新

这是React 18并发渲染的核心API之一。

什么是Transition？

Transition（过渡）让你把更新标记为"非紧急"的。React会优先处理紧急更新（比如用户输入、点击），非紧急更新可以被中断和延迟。

典型场景：搜索框输入。用户输入是紧急更新，要立刻响应；搜索结果列表的更新是非紧急的，可以延迟，等用户输入完再更新。

useTransition的用法：

import { useTransition } from 'react';

function SearchResults() {
  const [query, setQuery] = useState('');
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    // 紧急更新：立刻更新输入框
    setQuery(e.target.value);
    
    // 非紧急更新：可以延迟
    startTransition(() => {
      setList(filterList(e.target.value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <div>加载中...</div>}
      <List data={list} />
    </div>
  );
}

startTransition里的更新会被标记为低优先级，React可以中断它去处理更紧急的更新。isPending表示这个过渡更新是否还在进行中，可以用来显示加载状态。

什么时候用Transition？

  • 搜索、过滤、排序等会导致大量渲染的操作
  • 切换tab、路由跳转等
  • 任何用户输入后触发大量UI更新的场景

注意：

  • Transition里的更新应该是纯函数，不要有副作用
  • 不要在Transition里放紧急的更新（比如输入框的值）
  • isPending可以用来显示加载状态，但不要用它做重要的逻辑判断

四、useDeferredValue：延迟更新值

useDeferredValue和useTransition类似，但用法不同。它返回一个延迟更新的值，让React延迟处理这个值带来的渲染。

import { useDeferredValue } from 'react';

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  // deferredQuery会延迟更新
  const list = useMemo(() => filterList(deferredQuery), [deferredQuery]);

  return <List data={list} />;
}

当query变化时，deferredQuery不会立刻变化，React会先渲染旧的值，然后在后台用新值重新渲染。这样输入框的更新不会被阻塞。

useDeferredValue和useTransition的区别：

  • useTransition是你自己控制哪些更新是过渡的
  • useDeferredValue是延迟一个值，适合你不能控制更新来源的情况（比如值是从props传进来的）
  • 两者效果类似，根据场景选择

五、Suspense的增强

Suspense在React 16就引入了，但React 18对它做了增强，支持了服务端渲染（SSR）和并发渲染。

Suspense for Data Fetching

React 18的Suspense可以用来处理数据加载。组件在加载数据时，可以"挂起"（suspend），React会显示fallback，数据加载完后再渲染组件。

import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfilePage />
    </Suspense>
  );
}

ProfilePage里如果用了支持Suspense的数据获取库（比如Relay、React Query的Suspense模式），数据加载时会自动挂起，显示Loading。

Suspense SSR

React 18支持了Suspense的服务端渲染。以前SSR是"全有或全无"的，必须等所有数据加载完才能输出HTML。现在可以用Suspense包裹组件，先输出已经准备好的HTML，慢的组件 later 再流式输出。

这能让SSR的首屏时间更短，用户更快看到内容。

注意： Suspense for Data Fetching还在发展中，目前主要和Relay等框架配合使用。普通的fetch还不支持Suspense，需要用支持Suspense的库。

六、并发渲染的架构原理

了解了API，再深入看看并发渲染的底层原理。

1. Fiber架构

React 16引入了Fiber架构，把组件树转换成链表结构，让渲染可以中断和恢复。每个Fiber节点代表一个组件，记录了组件的状态和要做的工作。

Fiber架构是并发渲染的基础。有了Fiber，React才能在渲染过程中暂停、恢复、放弃。

2. 优先级调度（Scheduler）

React用Scheduler库来调度渲染任务。不同的更新有不同的优先级：

  • Immediate：同步执行，不能中断
  • UserBlocking：用户交互相关，比如输入、点击，需要快速响应
  • Normal：普通更新，比如数据加载后的更新
  • Low：低优先级，比如分析统计
  • Idle：空闲时执行

React会根据优先级决定先执行哪个任务。高优先级的任务可以打断低优先级的任务。

3. 双缓冲（Double Buffering）

React在内存中维护两个Fiber树：current树（当前显示的）和workInProgress树（正在构建的）。渲染在workInProgress树上进行，完成后再切换到current树。

这样，渲染过程中用户看到的还是旧的UI，不会出现半更新的状态。渲染完成后，一次性切换到新UI。

4. 可中断渲染

在渲染过程中，React会定期检查是否有更高优先级的任务。如果有，就暂停当前渲染，去处理高优先级任务，然后再回来继续（或者重新开始）。

这就是并发渲染的核心：渲染可以被中断，让高优先级的任务先执行。

七、高并发场景下的应用

React 18的并发特性，在高并发、大数据量的场景下特别有用。

场景一：大列表搜索

用户在搜索框输入，下面是一个几千条的列表。每次输入都要过滤和渲染整个列表，渲染时间长，输入卡顿。

用useTransition或useDeferredValue，把列表更新标记为非紧急，用户输入就不会卡顿了。列表会在用户输入停止后更新，体验流畅。

场景二：Tab切换

切换Tab时，新Tab的内容很多，渲染慢。用startTransition包裹Tab切换的状态更新，切换时立刻显示Tab的切换动画，内容在后台准备，准备好后再显示。

场景三：表单输入+实时校验

用户输入表单，同时做实时校验和提示。输入是紧急更新，校验和提示是非紧急的。用Transition分开，输入流畅，校验提示稍后更新。

场景四：路由切换

路由切换时，新页面的数据加载慢。用Suspense包裹路由组件，可以先显示旧页面或加载状态，新页面准备好后再切换，不会白屏。

八、升级和使用注意事项

1. 升级到React 18

升级React 18很简单，改一下渲染方式就行：

npm install react@rc react-dom@rc

然后把ReactDOM.render改成createRoot。大部分应用可以无缝升级，因为并发渲染是渐进式的，不开启新特性的话，行为和React 17差不多。

2. 注意严格模式（Strict Mode）

React 18的严格模式下，开发环境会故意双重调用组件函数和Effect，帮助发现副作用问题。这可能会让一些代码出问题，要确保组件是纯函数，Effect有正确的清理。

3. 不要滥用Transition

不是所有更新都要用Transition。只有那些会导致大量渲染、可以延迟的更新才用。简单的状态更新（比如开关、计数）不需要用Transition，用了反而增加复杂度。

4. 第三方库的兼容性

React 18改了一些底层行为，第三方库可能需要适配。比如一些状态管理库（Redux、MobX）已经适配了React 18，但一些老的库可能有问题。升级前要检查依赖的兼容性。

5. 性能测量

用React DevTools的Profiler来测量渲染性能，看看哪些组件渲染慢，再决定要不要用并发特性优化。不要盲目优化，先测量，再优化。

九、写在最后

React 18的并发渲染，是React架构的一次重大升级。它不是一个简单的新功能，而是一种全新的渲染模式，让React能够更好地应对复杂的、高并发的用户界面。

自动批处理、Transitions、useDeferredValue、Suspense，这些特性都是建立在并发渲染之上的。理解了并发渲染的原理，就能更好地使用这些特性。

但也要注意，并发渲染不是银弹。它能提升用户体验，但也增加了复杂度。大部分应用，用了createRoot和自动批处理就够了，不需要到处用Transition。只有在确实有性能问题的场景，再考虑用并发特性优化。

2022年了，React 18即将正式发布。前端框架还在不断进化，我们也要持续学习，跟上技术的发展。

希望这篇文章能帮你理解React 18的并发特性。如果你有其他问题或经验，欢迎在评论区交流。

祝大家都能写出流畅、高性能的React应用。