React 18 并发机制深度解析

# 导语

React 18 最重要的更新就是引入了并发机制（Concurrent Features），这是 React 团队多年研发的结晶。简单来说，并发机制让 React 可以同时准备多个版本的 UI，根据用户设备的性能动态调整渲染优先级，从而提供更流畅的用户体验。

本文将深入浅出地讲解 React 18 并发渲染的核心原理，包括 Lane 模型、时间切片、useTransition 等关键技术，并通过源码分析帮助大家彻底理解这一革命性的架构升级。

# 一、React 渲染流程与问题

# 1.1 传统渲染流程

在 React 18 之前，React 的渲染过程是同步且不可中断的。假设我们有这样一个组件树：

function App() {
  return (
    <div>
      <Header />
      <Sidebar />
      <Content>
        <ComponentA />
        <ComponentB />
      </Content>
      <Footer />
    </div>
  );
}

React 会以 DFS（深度优先搜索） 的顺序遍历整棵树：

App -> Header -> Sidebar -> Content -> ComponentA -> ComponentB -> Footer

对于每个组件，React 都会创建对应的 Fiber Node（Fiber 节点），用于保存渲染所需的信息如 props、key、ref、lanes 等。这就是 React 的 Fiber 架构。

# 1.2 渲染触发时机

React 会在两种情况下触发渲染：

1. mount：首次渲染，例如 ReactDOM.createRoot(document.querySelector('#root')).render(<App />)
2. update：状态更新，例如通过 useState、useReducer 等 Hook 触发重新渲染

# 1.3 核心问题：渲染不可中断

在 React 18 之前，整个渲染过程是不能被中断的。这意味着：

• 如果某个组件渲染开销较大（如包含大量列表项），用户会明显感觉到页面卡顿
• 在渲染过程中，浏览器无法响应用户的交互操作
• 即使有更高优先级的任务（如用户点击），也必须等待当前渲染完成

React 官方提供了一个典型例子来展示这个问题：

function App() {
  const [tab, setTab] = useState('posts');

  return (
    <div>
      <button onClick={() => setTab('posts')}>Posts</button>
      <button onClick={() => setTab('about')}>About</button>
      {tab === 'posts' ? <PostsTab /> : <AboutTab />}
    </div>
  );
}

// PostsTab 包含500个渲染开销大的组件
function PostsTab() {
  return (
    <div>
      {Array(500).fill(0).map((_, i) => (
        <SlowPost key={i} index={i} />
      ))}
    </div>
  );
}

// 每个SlowPost组件渲染需要1ms
function SlowPost({ index }) {
  // 模拟渲染开销
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {}

  return <div>Post #{index}</div>;
}

在这个例子中：

• 点击 Posts 按钮后，页面会出现明显卡顿
• 在渲染完成前，其他按钮点击无法响应
• 用户体验非常糟糕

这就是 React 18 并发机制要解决的核心问题。

# 二、并发渲染的核心解决方案

React 18 通过两个核心技术实现了并发渲染：

1. Lane 模型：为每次渲染分配优先级
2. 时间切片：将连续渲染拆分为可中断的片段

# 2.1 解决方案一：useTransition

React 18 提供了 useTransition Hook 来解决上述问题：

import { useState, useTransition } from 'react';

function App() {
  const [tab, setTab] = useState('posts');
  const [isPending, startTransition] = useTransition();

  function handleTabChange(nextTab) {
    // 使用 startTransition 包裹低优先级更新
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <button onClick={() => handleTabChange('posts')}>Posts</button>
      <button onClick={() => handleTabChange('about')}>About</button>
      {isPending ? <Loading /> : tab === 'posts' ? <PostsTab /> : <AboutTab />}
    </div>
  );
}

使用 useTransition 后：

• 点击按钮会立即响应，页面不会卡顿
• 低优先级的渲染任务可以被高优先级任务中断
• 用户可以继续与其他元素交互

这就是并发更新的典型应用场景。

# 三、 Lane 模型详解

# 3.1 什么是 Lane

Lane（中文意为"赛道"）是 React 18 引入的优先级管理机制。简单来说，Lane 模型会给每次渲染分配一个优先级，React 根据这些优先级决定哪些更新应该优先处理。

# 3.2 二进制表示的优势

React 使用二进制来表示不同的 Lane：

// React 源码中的 Lane 定义（简化）
const Lane = {
  NoLane: 0b0000000000000000000000000000000,
  SyncLane: 0b0000000000000000000000000000001,  // 最高优先级
  InputContinuousLane: 0b0000000000000000000000000000100,
  DefaultLane: 0b0000000000000000000000000010000,
  IdleLane: 0b0000000000000000000001000000000,   // 最低优先级
};

为什么采用二进制？

1. 性能：计算机底层对二进制的处理效率更高
2. 位运算：可以轻松完成合并、比较等操作

// 合并多个 Lane
export function mergeLanes(a, b) {
  return a | b;  // 位运算 OR
}

// 移除某个 Lane
export function removeLanes(set, subset) {
  return set & ~subset;  // 位运算 AND NOT
}

# 3.3 事件优先级映射

不同的浏览器事件对应不同的 Lane 优先级：

export function getEventPriority(domEventName) {
  switch (domEventName) {
    case 'click':
    case 'input':
    case 'keydown':
      return DiscreteEventPriority;  // 最高优先级
    case 'scroll':
    case 'wheel':
    case 'mouseenter':
      return ContinuousEventPriority; // 中等优先级
    default:
      return DefaultEventPriority;    // 默认优先级
  }
}

优先级顺序：DiscreteEventPriority > ContinuousEventPriority > DefaultEventPriority

这意味着：

• 用户点击输入等操作会立即响应
• 滚动、拖拽等连续事件次之
• 数据渲染等后台任务优先级最低

# 四、时间切片详解

# 4.1 什么是时间切片

时间切片（Time Slicing） 是将连续不可中断的渲染过程变成可中断的、离散的渲染片段。

这样做的好处是：

1. 在渲染间隙可以判断是否有更高优先级的任务
2. 可以及时渲染 UI 界面
3. 可以响应用户的交互操作

# 4.2 为什么需要时间切片

我们先理解浏览器的刷新机制：

• 常见显示器刷新率有 60Hz、120Hz、144Hz
• 60Hz 意味着每秒钟刷新 60 次，即每次间隔约 16.7ms
• 浏览器需要在 16.7ms 内完成 JS 执行和 UI 渲染

问题在于：React 的渲染和 JS 执行都运行在主线程上，当渲染时间过长时，会阻塞 UI 渲染导致卡顿。

时间切片的解决方案：把连续的渲染过程切分成小块，每个小块执行时间不超过 5ms，执行完后让出主线程，让浏览器有机会渲染 UI。

# 4.3 React 如何实现时间切片

React 并没有直接使用 requestIdleCallback（因为 Safari 不兼容且浏览器执行不够积极），而是基于 MessageChannel 实现了自己的调度器。

# MessageChannel 实现原理

// React Scheduler 源码简化版
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = performWorkUntilDeadline;

// 调度函数
function requestHostCallback(callback) {
  scheduledHostCallback = callback;
  if (!isMessageLoopRunning) {
    isMessageLoopRunning = true;
    port.postMessage(null);  // 发送消息触发调度
  }
}

// 核心工作循环
function workLoop() {
  let currentTask = taskQueue[0];
  while (currentTask) {
    if (shouldYieldToHost()) {  // 判断是否需要让出主线程
      break;  // 让出主线程，等待下次调度
    }
    const callback = currentTask.callback;
    callback();
    taskQueue.shift();
    currentTask = taskQueue[0];
  }
  return currentTask !== null;  // 是否还有任务
}

// 判断是否需要让出主线程
function shouldYieldToHost() {
  const timeElapsed = getCurrentTime() - startTime;
  return timeElapsed >= 5;  // 默认5ms时间片
}

# 工作流程

# 4.4 与 requestAnimationFrame 的关系

时间切片与浏览器渲染时机的关系：

React 的时间切片就是在步骤 3-5 之间找到执行渲染任务的机会。

# 五、并发模式下的渲染流程

# 5.1 非并发模式 vs 并发模式

非并发模式：

并发模式：

# 总结