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' ? <<