深入理解 React 18 并发模式与 Fiber 架构：从源码到实战的全面解析#

1
// 模拟传统 React 的渲染过程
2
function legacyRender() {
3
  // 开始渲染，浏览器被阻塞
4
  for (let i = 0; i < 10000; i++) {
5
    renderComponent(tree[i]); // 这个循环不结束，用户什么都干不了
6
  }
7
  // 终于渲染完了，用户松了口气
8
}

1
// 帧预算示意图
2
// |---JS执行---|--样式计算--|--布局--|--绘制--|--合成--|
3
// |<----------- 16.67ms --------------------------->|

1
// 并发模式下的渲染过程
2
function concurrentRender() {
3
  while (hasWork) {
4
    performWorkForTimeSlice(); // 工作一小段时间（约 5ms）
5

6
    // 检查是否有更高优先级的事
7
    if (hasUrgentWork || shouldYieldToBrowser()) {
8
      yieldControl(); // 先让浏览器处理紧急事务
9
    }
10

11
    scheduleNextWork(); // 稍后回来继续
12
  }
13
}

1
// Fiber 节点的核心结构（简化版）
2
interface Fiber {
3
  // 类型信息
4
  type: any;                    // 组件类型或 HTML 标签
5
  tag: WorkTag;                 // Fiber 类型标记
6
  key: string | null;           // 用于 Diff 的 key
7

8
  // 树形结构（链表指针）
9
  child: Fiber | null;          // 第一个子节点
10
  sibling: Fiber | null;        // 下一个兄弟节点
11
  return: Fiber | null;         // 父节点（return 表示处理完子节点后返回的地方）
12
  index: number;                // 在兄弟节点中的索引
13

14
  // 状态
15
  memoizedState: any;           // Hook 链表或 Class 组件的 state
16
  memoizedProps: any;           // 上一次渲染的 props
17
  pendingProps: any;            // 新的 props
18

19
  // 副作用
20
  flags: Flags;                 // 副作用标记（Placement/Update/Deletion）
21
  subtreeFlags: Flags;          // 子树的副作用标记
22
  updateQueue: UpdateQueue<any> | null; // 更新队列
23

24
  // 双缓冲
25
  alternate: Fiber | null;      // 指向另一棵树的对应节点
26

27
  // 其他
28
  ref: any;                     // ref
29
  lanes: Lanes;                 // 优先级车道
30
  childLanes: Lanes;            // 子节点的优先级
31
}

1
        Root
2
       /    \
3
current    workInProgress
4
  树          树
5
(屏幕上)    (后台计算)
6
   ↑             ↑
7
 alternate   alternate
8
   └─────────────┘

1
// 双缓冲切换的核心逻辑
2
function commitRoot(root) {
3
  const finishedWork = root.finishedWork;
4

5
  // 1. 切换指针
6
  root.current = finishedWork;
7

8
  // 2. workInProgress 变成 current
9
  // 3. 原来的 current 变成了下一轮的 workInProgress
10
}

1
function workLoop() {
2
  while (workInProgress !== null && !shouldYield()) {
3
    workInProgress = performUnitOfWork(workInProgress);
4
  }
5

6
  if (workInProgress !== null) {
7
    // 时间片用完了，保存状态，下次继续
8
    scheduleCallback(workLoop);
9
  }
10
}
11

12
function performUnitOfWork(fiber) {
13
  // 1. 处理当前节点（创建或更新）
14
  const next = beginWork(fiber);
15

16
  // 2. 如果有子节点，先处理子节点
17
  if (next !== null) {
18
    return next;
19
  }
20

21
  // 3. 没有子节点，处理兄弟节点或返回父节点
22
  return completeWork(fiber);
23
}

1
        A
2
       / \
3
      B   C
4
     / \   \
5
    D   E   F
6

7
遍历顺序：A → B → D → (D 完成) → E → (E 完成) → (B 完成) → C → F → (F 完成) → (C 完成) → (A 完成)

1
// React 源码中的 Lane 定义
2
export const TotalLanes = 31;
3

4
export const NoLanes = 0b0000000000000000000000000000000;
5
export const NoLane = 0b0000000000000000000000000000000;
6

7
export const SyncLane = 0b0000000000000000000000000000001; // 同步，最高优先级
8
export const InputContinuousHydrationLane = 0b0000000000000000000000000000010;
9
export const InputContinuousLane = 0b0000000000000000000000000000100; // 连续输入
10
export const DefaultHydrationLane = 0b0000000000000000000000000001000;
11
export const DefaultLane = 0b0000000000000000000000000010000; // 默认
12
export const TransitionHydrationLane = 0b0000000000000000000000000100000;
13
export const TransitionLanes = 0b0000000001111111111111111000000; // 过渡
14
export const RetryLanes = 0b0000011110000000000000000000000;
15
export const IdleLane = 0b0100000000000000000000000000000; // 空闲

1
import { useState, useTransition } from 'react';
2

3
function SearchPage() {
4
  const [inputValue, setInputValue] = useState('');
5
  const [searchResults, setSearchResults] = useState([]);
6
  const [isPending, startTransition] = useTransition();
7

8
  const handleInput = (e) => {
9
    const value = e.target.value;
10

11
    // 高优先级：立即更新输入框
12
    setInputValue(value);
13

14
    // 低优先级：搜索可以等一等
15
    startTransition(() => {
16
      setSearchResults(searchData(value));
17
    });
18
  };
19

20
  return (
21
    <div>
22
      <input
23
        value={inputValue}
24
        onChange={handleInput}
25
        placeholder="搜索..."
26
      />
27
      {isPending && <span className="loading">搜索中...</span>}
28
      <ResultsList items={searchResults} />
29
    </div>
30
  );
31
}

1
function SlowList({ text }) {
2
  // deferredText 会有延迟，不会阻塞用户输入
3
  const deferredText = useDeferredValue(text);
4

5
  // 使用 deferredText 渲染大量数据
6
  return (
7
    <ul>
8
      {largeList.map(item => (
9
        <li key={item.id}>{item.name} - {deferredText}</li>
10
      ))}
11
    </ul>
12
  );
13
}

1
interface Hook {
2
  memoizedState: any;       // 当前值
3
  baseState: any;           // 基础值
4
  baseQueue: Update<any> | null;
5
  queue: UpdateQueue<any> | null;
6
  next: Hook | null;        // 下一个 Hook
7
}

1
function useState(initialState) {
2
  // 1. 获取当前正在渲染的 Fiber
3
  const fiber = currentlyRenderingFiber;
4

5
  // 2. 获取或创建 Hook 节点
6
  const hook = mountWorkInProgressHook();
7

8
  // 3. 处理更新队列
9
  const queue = hook.queue;
10
  if (queue.pending !== null) {
11
    // 有待处理的更新，计算新状态
12
    const newState = reducer(hook.baseState, queue.pending.action);
13
    hook.memoizedState = newState;
14
  }
15

16
  // 4. 返回状态和 dispatch 函数
17
  const dispatch = queue.dispatch;
18
  return [hook.memoizedState, dispatch];
19
}

1
function useEffect(create, deps) {
2
  const hook = mountWorkInProgressHook();
3

4
  if (areHookInputsEqual(deps, hook.memoizedState[1])) {
5
    // 依赖没变，跳过
6
    return;
7
  }
8

9
  // 创建 effect
10
  const effect = {
11
    tag: HookHasEffect,
12
    create,
13
    destroy: null,
14
    deps,
15
    next: null
16
  };
17

18
  // 加入 effect 链表
19
  pushEffect(effect);
20
}

1
// 1. 用户代码
2
setState(newValue);
3

4
// 2. React 内部：创建更新对象
5
const update = {
6
  lane: SyncLane,
7
  action: newValue,
8
  next: null
9
};
10

11
// 3. 加入更新队列
12
enqueueUpdate(fiber, update);
13

14
// 4. 调度更新
15
scheduleUpdateOnFiber(fiber, lane);

1
// beginWork：处理当前节点，返回下一个要处理的节点
2
function beginWork(current, workInProgress, renderLanes) {
3
  switch (workInProgress.tag) {
4
    case FunctionComponent: {
5
      const Component = workInProgress.type;
6
      const props = workInProgress.pendingProps;
7
      const children = Component(props);
8
      reconcileChildren(current, workInProgress, children, renderLanes);
9
      return workInProgress.child;
10
    }
11
    // ... 其他 case
12
  }
13
}

1
function commitRoot(root) {
2
  const finishedWork = root.finishedWork;
3

4
  // 1. Before Mutation 阶段
5
  commitBeforeMutationEffects(finishedWork);
6

7
  // 2. Mutation 阶段（修改 DOM）
8
  commitMutationEffects(root, finishedWork);
9

10
  // 3. 切换 current 树
11
  root.current = finishedWork;
12

13
  // 4. Layout 阶段
14
  commitLayoutEffects(finishedWork, root);
15

16
  // 5. 异步触发 useEffect
17
  scheduleCallback(NormalPriority, flushPassiveEffects);
18
}

1
const ExpensiveComponent = React.memo(function MyComponent({ data }) {
2
  // 只有当 data 变化时才重新渲染
3
  return <div>{data}</div>;
4
});

1
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
2

3
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

1
function VirtualList({ items, itemHeight, height }) {
2
  const [scrollTop, setScrollTop] = useState(0);
3

4
  const startIndex = Math.floor(scrollTop / itemHeight);
5
  const visibleCount = Math.ceil(height / itemHeight);
6
  const visibleItems = items.slice(startIndex, startIndex + visibleCount);
7

8
  return (
9
    <div
10
      style={{ height, overflow: 'auto' }}
11
      onScroll={e => setScrollTop(e.currentTarget.scrollTop)}
12
    >
13
      <div style={{ height: items.length * itemHeight }}>
14
        {visibleItems.map((item, i) => (
15
          <div key={item.id} style={{
16
            position: 'absolute',
17
            top: (startIndex + i) * itemHeight,
18
            height: itemHeight
19
          }}>
20
            {item.content}
21
          </div>
22
        ))}
23
      </div>
24
    </div>
25
  );
26
}