React 18 并发模式（Concurrent Mode）：Fiber 架构的终极进化

React 18 引入了并发模式（Concurrent Mode） ，这是 React 架构史上最大的一次升级。它如何解决长列表渲染卡顿？如何实现可中断的组件更新？

今天，我们从操作系统进程调度的视角，深度剖析 React Fiber 架构的并发机制。

1. 传统渲染模式的问题

1.1 同步渲染的致命缺陷

React 17 及之前的渲染是同步阻塞的：

// 假设组件树有 1000 个节点
function App() {
    return (
        <div>
            {Array.from({ length: 1000 }, (_, i) => (
                <Item key={i} />
            ))}
        </div>
    );
}

问题：

• React 会一次性渲染所有节点，不可中断
• 如果渲染耗时 500ms，用户在这 500ms 内的任何交互都会被阻塞
• 导致"卡顿"、"无响应"体验

1.2 操作系统类比

这就像操作系统的单任务模式：一个进程独占 CPU，其他进程只能等待。

2. Fiber 架构：可中断的渲染

2.1 Fiber 节点的数据结构

React Fiber 将组件树转换为链表结构：

class FiberNode {
    constructor(tag, pendingProps) {
        this.tag = tag;              // 组件类型
        this.key = key;              // 唯一标识
        this.elementType = null;     // 元素类型
        this.type = null;            // 函数/类组件
        this.stateNode = null;       // DOM 节点
        
        // 链表指针
        this.return = null;          // 父节点
        this.child = null;           // 子节点
        this.sibling = null;         // 兄弟节点
        
        // 状态信息
        this.pendingProps = pendingProps;
        this.memoizedProps = null;
        this.memoizedState = null;
        this.updateQueue = null;
    }
}

2.2 双缓冲机制（Double Buffering）

React 维护两棵 Fiber 树：

Current Tree（当前屏幕显示）
WorkInProgress Tree（正在构建的新树）

工作流程：

1. 从 current 树的根节点开始，克隆出 workInProgress 树
2. 在 workInProgress 树上执行 Diff 算法和状态更新
3. 渲染完成后，交换两棵树的指针
4. 下次更新时，原来的 workInProgress 变成新的 current

优势：避免中间状态闪烁，保证视图一致性。

3. 并发渲染：时间切片（Time Slicing）

3.1 核心算法

// 简化版调度器
function workLoopConcurrent() {
    let shouldYield = false;
    
    while (workInProgress !== null && !shouldYield) {
        // 执行一个 Fiber 节点的工作
        performUnitOfWork(workInProgress);
        
        // 检查是否还有剩余时间
        shouldYield = shouldYieldToHost();
    }
}

function shouldYieldToHost() {
    const timeElapsed = getCurrentTime() - startTime;
    
    // 如果已工作超过 5ms，让出控制权
    if (timeElapsed > 5) {
        return true;
    }
    
    return false;
}

3.2 requestIdleCallback 机制

React 利用浏览器的空闲时间执行渲染：

function scheduleCallback(callback) {
    // 优先级调度
    if (typeof requestIdleCallback !== 'undefined') {
        requestIdleCallback((deadline) => {
            while (workInProgress && deadline.timeRemaining() > 0) {
                performUnitOfWork(workInProgress);
            }
        });
    } else {
        // 降级方案：setTimeout
        setTimeout(callback, 0);
    }
}

时间片分配：

• 每帧 16.6ms（60fps）
• 浏览器需要 ~10ms 处理样式、布局、绘制
• React 可用时间：~5ms
• 超过 5ms 就让出控制权，避免阻塞用户交互

4. 优先级调度系统

4.1 优先级等级

const DiscreteEventPriority = 1;   // 点击、输入（立即执行）
const ContinuousEventPriority = 2; // 滚动、拖拽（稍后执行）
const DefaultEventPriority = 3;    // 普通更新
const IdleEventPriority = 4;       // 空闲时执行

4.2 更新队列

class UpdateQueue {
    constructor() {
        this.shared = { pending: null };
    }
    
    enqueueUpdate(fiber, update) {
        const pending = this.shared.pending;
        
        if (pending === null) {
            update.next = update; // 环形链表
        } else {
            update.next = pending.next;
            pending.next = update;
        }
        
        this.shared.pending = update;
    }
}

调度策略：

• 高优先级更新会中断低优先级更新
• 被中断的更新会被重新计算，避免状态不一致

5. Suspense：声明式加载状态

5.1 核心实现

function Suspense({ children, fallback }) {
    const [isReady, setIsReady] = useState(false);
    
    // 子组件抛出 Promise 时捕获
    try {
        return children;
    } catch (promise) {
        if (promise instanceof Promise) {
            promise.then(() => setIsReady(true));
            return fallback;
        }
        throw promise;
    }
}

5.2 使用场景

<Suspense fallback={<Loading />}>
    <LazyComponent />
</Suspense>

工业界应用：

• 路由懒加载
• 图片渐进式加载
• 数据请求占位

6. useTransition：过渡更新

6.1 API 设计

const [isPending, startTransition] = useTransition();

startTransition(() => {
    // 低优先级更新（如搜索过滤）
    setSearchQuery(input);
});

// 高优先级更新（如输入框内容）
setInput(e.target.value);

6.2 实现原理

function useTransition() {
    const [isPending, setPending] = useState(false);
    
    function startTransition(callback) {
        setPending(true);
        
        // 以低优先级调度
        scheduleUpdateOnFiber(
            current,
            lane, // IdleLane
            eventTime
        );
        
        callback();
        
        // 完成后重置状态
        scheduleUpdateOnFiber(
            current,
            DefaultLane,
            eventTime
        ).then(() => setPending(false));
    }
    
    return [isPending, startTransition];
}

7. 工业界实战：性能优化策略

7.1 列表虚拟化 + 并发模式

import { useTransition } from 'react';
import VirtualList from 'react-window';

function SearchableList({ items }) {
    const [filter, setFilter] = useState('');
    const [isPending, startTransition] = useTransition();
    
    function handleChange(e) {
        const value = e.target.value;
        setInput(value); // 立即更新输入框
        
        startTransition(() => {
            setFilter(value); // 延迟更新列表
        });
    }
    
    const filtered = items.filter(item => 
        item.name.includes(filter)
    );
    
    return (
        <>
            <input value={input} onChange={handleChange} />
            {isPending && <Loading />}
            <VirtualList items={filtered} />
        </>
    );
}

7.2 数据获取优化

// 使用 Suspense + use
function UserProfile({ userId }) {
    const user = use(fetchUser(userId));
    
    return (
        <Suspense fallback={<Skeleton />}>
            <Profile user={user} />
        </Suspense>
    );
}

8. 面试考点

Q1: React 18 的并发模式解决了什么问题？

A: 解决了同步渲染导致的用户交互阻塞问题。通过时间切片和优先级调度，将长任务拆分成多个小任务，在浏览器空闲时执行，避免卡顿。

Q2: Fiber 架构为什么使用链表而不是树？

A: 链表可以方便地实现增量渲染。每个 Fiber 节点保存了 child、sibling、return 指针，React 可以暂停和恢复渲染过程，支持可中断的并发更新。

Q3: useTransition 和 useDeferredValue 有什么区别？

A: useTransition 用于标记低优先级更新，可以获取 isPending 状态显示加载指示器。useDeferredValue 用于延迟某个值的变化，类似于防抖，但没有 isPending 状态。

9. 总结

React 18 并发模式的核心突破：

1. Fiber 链表：支持可中断的增量渲染
2. 时间切片：将长任务拆分成小任务
3. 优先级调度：高优先级更新优先执行
4. Suspense：声明式处理异步状态
5. useTransition：区分紧急和非紧急更新

这套架构让 React 从"渲染引擎"进化为"并发运行时"，是现代前端框架的里程碑。

---

如果你觉得这篇关于"React 并发架构"的文章对你有帮助，欢迎点赞收藏！