第8章 并发特性(Concurrent Features)：现代React的核心竞争力

8.1 Lane优先级模型与调度算法

Lane模型是React 18引入的新优先级系统，它取代了之前的Expiration Time模型，提供了更细粒度的优先级控制。

8.1.1 31位优先级的位掩码设计

React使用31位整数来表示优先级，这种设计允许高效的位运算操作。

不同Lane的按位或(OR)、按位与(AND)操作与优先级合并

TYPESCRIPT
复制
1// Lane位掩码设计
2export const TotalLanes = 31;
3
4// 优先级Lane定义
5export const NoLanes: Lanes = 0b0000000000000000000000000000000;
6export const NoLane: Lane = 0b0000000000000000000000000000000;
7
8export const SyncHydrationLane: Lane = 0b0000000000000000000000000000001;
9export const SyncLane: Lane = 0b0000000000000000000000000000010;
10export const SyncLaneIndex: number = 1;
11
12export const InputContinuousHydrationLane: Lane = 0b0000000000000000000000000000100;
13export const InputContinuousLane: Lane = 0b0000000000000000000000000001000;
14
15export const DefaultHydrationLane: Lane = 0b0000000000000000000000000010000;
16export const DefaultLane: Lane = 0b0000000000000000000000000100000;
17
18// Transition lanes（批量更新，低优先级）
19export const TransitionHydrationLane: Lane = 0b0000000000000000000000001000000;
20export const TransitionLane1: Lane = 0b0000000000000000000000010000000;
21export const TransitionLane2: Lane = 0b0000000000000000000000100000000;
22export const TransitionLane3: Lane = 0b0000000000000000000001000000000;
23// ... TransitionLane4-15
24
25export const RetryLane1: Lane = 0b0000010000000000000000000000000;
26export const RetryLane2: Lane = 0b0000100000000000000000000000000;
27// ... RetryLane3-4
28
29export const SomeRetryLane: Lane = RetryLane1;
30
31export const SelectiveHydrationLane: Lane = 0b0001000000000000000000000000000;
32
33export const NonIdleLanes: Lanes = 0b0001111111111111111111111111111;
34
35export const IdleHydrationLane: Lane = 0b0010000000000000000000000000000;
36export const IdleLane: Lane = 0b0100000000000000000000000000000;
37
38export const OffscreenLane: Lane = 0b1000000000000000000000000000000;
39
40// Lane操作函数
41export function mergeLanes(a: Lanes | Lane, b: Lanes | Lane): Lanes {
42  return a | b;  // 按位或合并优先级
43}
44
45export function removeLanes(set: Lanes, subset: Lanes | Lane): Lanes {
46  return set & ~subset;  // 按位与移除优先级
47}
48
49export function intersectLanes(a: Lanes | Lane, b: Lanes | Lane): Lanes {
50  return a & b;  // 按位与求交集
51}
52
53export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane): boolean {
54  return (set & subset) === subset;
55}
56
57export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane): boolean {
58  return (a & b) !== NoLanes;
59}
60
61export function includesNonIdleWork(lanes: Lanes): boolean {
62  return (lanes & NonIdleLanes) !== NoLanes;
63}
64
65export function includesOnlyTransitions(lanes: Lanes): boolean {
66  return (lanes & TransitionLanes) === lanes;
67}

Transition、Default、Discrete、Idle的分类与使用场景

TYPESCRIPT
复制
1// 优先级分类与使用场景
2
3/**
4 * Sync（同步优先级）
5 * 使用场景：
6 * - 用户输入（受控组件）
7 * - 同步渲染
8 * - 紧急状态更新
9 */
10function SyncExample() {
11  const [value, setValue] = useState('');
12  
13  // 受控组件：同步更新
14  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
15    setValue(e.target.value);  // Sync优先级
16  };
17  
18  return <input value={value} onChange={handleChange} />;
19}
20
21/**
22 * Default（默认优先级）
23 * 使用场景：
24 * - 普通状态更新
25 * - 数据获取
26 * - 非紧急UI更新
27 */
28function DefaultExample() {
29  const [data, setData] = useState(null);
30  
31  useEffect(() => {
32    fetchData().then(setData);  // Default优先级
33  }, []);
34  
35  return <div>{data}</div>;
36}
37
38/**
39 * Transition（过渡优先级）
40 * 使用场景：
41 * - 大型列表更新
42 * - 路由切换
43 * - 搜索过滤
44 * - 任何可以延迟的更新
45 */
46function TransitionExample() {
47  const [isPending, startTransition] = useTransition();
48  const [filter, setFilter] = useState('');
49  const [filteredItems, setFilteredItems] = useState(items);
50  
51  const handleFilterChange = (value: string) => {
52    setFilter(value);  // 紧急更新
53    
54    startTransition(() => {
55      // 过渡更新，可以被中断
56      setFilteredItems(items.filter(item => 
57        item.name.includes(value)
58      ));
59    });
60  };
61  
62  return (
63    <div>
64      <input 
65        value={filter} 
66        onChange={e => handleFilterChange(e.target.value)} 
67      />
68      {isPending && <Spinner />}
69      <List items={filteredItems} />
70    </div>
71  );
72}
73
74/**
75 * Idle（空闲优先级）
76 * 使用场景：
77 * - 预加载数据
78 * - 非关键分析
79 * - 日志上报
80 */
81function IdleExample() {
82  useEffect(() => {
83    // 使用requestIdleCallback或Scheduler
84    const id = requestIdleCallback(() => {
85      // 在浏览器空闲时执行
86      analytics.track('page_view');
87    });
88    
89    return () => cancelIdleCallback(id);
90  }, []);
91  
92  return <div />;
93}

8.1.2 优先级饥饿(Starvation)预防

React通过过期时间机制防止低优先级任务无限期等待。

时间切片计数器与优先级aging算法

TYPESCRIPT
复制
1// 过期时间计算
2export const NoTimestamp = -1;
3
4// 不同优先级的超时时间（ms）
5const SYNC_TIMEOUT = -1;           // 同步，永不超时
6const MAX_SIGNED_31_BIT_INT = 1073741823;
7
8// 优先级到超时时间的映射
9function getTimeoutForLane(lane: Lane): number {
10  switch (lane) {
11    case SyncLane:
12      return -1;  // 同步，永不超时
13    case InputContinuousLane:
14      return 250;  // 250ms
15    case DefaultLane:
16      return 5000;  // 5s
17    case TransitionLane1:
18    case TransitionLane2:
19      // ...
20      return 5000;  // 5s
21    case IdleLane:
22      return MAX_SIGNED_31_BIT_INT;  // 永不过期
23    default:
24      return 5000;
25  }
26}
27
28// 标记过期lane
29export function markStarvedLanesAsExpired(
30  root: FiberRoot,
31  currentTime: number
32): void {
33  const pendingLanes = root.pendingLanes;
34  const expiredLanes = root.expiredLanes;
35  
36  // 遍历所有pending的lane
37  let lanes = pendingLanes;
38  while (lanes > 0) {
39    const index = pickArbitraryLaneIndex(lanes);
40    const lane = 1 << index;
41    
42    const expirationTime = root.expirationTimes[index];
43    
44    if (expirationTime === NoTimestamp) {
45      // 计算过期时间
46      root.expirationTimes[index] = currentTime + getTimeoutForLane(lane);
47    } else if (expirationTime <= currentTime) {
48      // 已过期，提升优先级
49      root.expiredLanes |= lane;
50    }
51    
52    lanes &= ~lane;
53  }
54}
55
56// 获取最高优先级lane（考虑过期）
57export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
58  const pendingLanes = root.pendingLanes;
59  
60  if (pendingLanes === NoLanes) {
61    return NoLanes;
62  }
63  
64  let nextLanes = NoLanes;
65  
66  // 优先处理已过期的lane
67  const expiredLanes = pendingLanes & root.expiredLanes;
68  if (expiredLanes !== NoLanes) {
69    nextLanes = getHighestPriorityLanes(expiredLanes);
70  } else {
71    // 获取最高优先级的非过期lane
72    const nonExpiredLanes = pendingLanes & ~root.expiredLanes;
73    nextLanes = getHighestPriorityLanes(nonExpiredLanes);
74  }
75  
76  return nextLanes;
77}

低优先级任务的插队机制与长任务分割

TYPESCRIPT
复制
1// 工作循环中的优先级检查
2function workLoopConcurrent() {
3  while (workInProgress !== null && !shouldYield()) {
4    // 检查是否有更高优先级的任务插入
5    if (didReceiveUpdate && 
6        getCurrentPriorityLevel() > getPriorityLevel(workInProgress.lanes)) {
7      // 让出执行权，让更高优先级的任务先执行
8      break;
9    }
10    
11    workInProgress = performUnitOfWork(workInProgress);
12  }
13}
14
15// 高优先级更新打断低优先级渲染
16function ensureRootIsScheduled(root: FiberRoot, currentTime: number): void {
17  const existingCallbackNode = root.callbackNode;
18  const nextLanes = getNextLanes(root, root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes);
19  
20  if (nextLanes === NoLanes) {
21    // 没有工作要做
22    if (existingCallbackNode !== null) {
23      cancelCallback(existingCallbackNode);
24    }
25    root.callbackNode = null;
26    root.callbackPriority = NoLane;
27    return;
28  }
29  
30  const newCallbackPriority = getHighestPriorityLane(nextLanes);
31  const existingCallbackPriority = root.callbackPriority;
32  
33  // 如果新优先级更高，取消现有回调
34  if (newCallbackPriority !== existingCallbackPriority) {
35    if (existingCallbackNode !== null) {
36      cancelCallback(existingCallbackNode);
37    }
38    
39    // 调度新的回调
40    const schedulerPriorityLevel = laneToSchedulerPriority(newCallbackPriority);
41    root.callbackPriority = newCallbackPriority;
42    root.callbackNode = scheduleCallback(
43      schedulerPriorityLevel,
44      performConcurrentWorkOnRoot.bind(null, root)
45    );
46  }
47}

8.1.3 并发渲染的模式切换

React 18支持两种渲染模式：Legacy模式和Concurrent模式。

SyncDefaultRoot与ConcurrentRoot的创建差异与行为边界

TYPESCRIPT
复制
1// 根节点创建
2function createRoot(container: Container, options?: CreateRootOptions): Root {
3  // React 18默认创建ConcurrentRoot
4  return createContainer(
5    container,
6    ConcurrentRoot,  // 标记为并发根
7    null,            // hydrationCallbacks
8    false,           // isStrictMode
9    false,           // concurrentUpdatesByDefaultOverride
10    '',              // identifierPrefix
11    null,            // onRecoverableError
12    null             // transitionCallbacks
13  );
14}
15
16// Legacy模式创建（React 17及之前）
17function legacyCreateRootFromDOMContainer(
18  container: Container,
19  initialChildren: ReactNodeList,
20  parentComponent: ReactComponent | null,
21  callback: Function | null,
22  isHydration: boolean
23): Root {
24  // 创建LegacyRoot
25  const root = createContainer(
26    container,
27    LegacyRoot,  // 标记为Legacy根
28    null,
29    false,
30    null,
31    '',
32    null,
33    null
34  );
35  
36  // 同步渲染
37  root.render(initialChildren);
38  
39  return root;
40}
41
42// 渲染模式差异
43function performWorkOnRoot(root: FiberRoot, lanes: Lanes, forceSync: boolean): void {
44  if (lanes === SyncLane || forceSync) {
45    // 同步渲染
46    exitStatus = renderRootSync(root, lanes);
47  } else {
48    // 并发渲染
49    exitStatus = renderRootConcurrent(root, lanes);
50  }
51  
52  // ...
53}
54
55// React 18的自动升级机制
56// 使用ReactDOM.render会发出警告，建议使用createRoot
57const ReactDOM = {
58  render(element: ReactElement, container: Container, callback?: Function) {
59    if (__DEV__) {
60      console.error(
61        'ReactDOM.render is no longer supported in React 18. ' +
62        'Use createRoot instead.'
63      );
64    }
65    
66    // 降级到Legacy模式
67    return legacyRenderSubtreeIntoContainer(
68      null,
69      element,
70      container,
71      false,
72      callback
73    );
74  },
75  
76  createRoot,
77  hydrateRoot,
78};

8.2 Suspense与流式渲染架构

Suspense是React的重要特性，它允许组件在异步操作完成前显示fallback UI。

8.2.1 SuspenseComponent的实现

Suspense通过捕获子组件抛出的Promise来实现异步等待。

抛出Thenable的捕获机制与Retry逻辑

TYPESCRIPT
复制
1// Suspense工作原理
2// 1. 子组件在异步数据未准备好时抛出Promise
3// 2. Suspense捕获Promise，显示fallback
4// 3. Promise resolve后，重新尝试渲染
5
6// 数据获取Hook（简化版）
7function useSuspenseData<T>(fetcher: () => Promise<T>): T {
8  const cache = getCacheForType(createCache);
9  const key = fetcher;
10  
11  const cached = cache.get(key);
12  if (cached !== undefined) {
13    if (cached.status === 'fulfilled') {
14      return cached.value;
15    } else if (cached.status === 'rejected') {
16      throw cached.reason;
17    }
18  }
19  
20  // 创建新的Promise
21  const thenable = fetcher();
22  thenable.then(
23    value => {
24      cached.status = 'fulfilled';
25      cached.value = value;
26    },
27    reason => {
28      cached.status = 'rejected';
29      cached.reason = reason;
30    }
31  );
32  
33  cache.set(key, { status: 'pending' });
34  throw thenable;  // 抛出Promise，触发Suspense
35}
36
37// Suspense组件实现
38function SuspenseComponent(props: {
39  children: ReactNode;
40  fallback: ReactNode;
41}) {
42  const { children, fallback } = props;
43  
44  // 使用Error Boundary类似的机制捕获Promise
45  return (
46    <SuspenseBoundary fallback={fallback}>
47      {children}
48    </SuspenseBoundary>
49  );
50}
51
52// React内部处理
53function throwException(
54  root: FiberRoot,
55  returnFiber: Fiber,
56  sourceFiber: Fiber,
57  value: any,
58  rootRenderLanes: Lanes
59): void {
60  if (value !== null && typeof value === 'object' &&
61      typeof value.then === 'function') {
62    // 这是一个Thenable（Promise）
63    const wakeable: Wakeable = value;
64    
65    // 标记Suspense边界
66    const suspenseBoundary = getSuspenseHandler();
67    if (suspenseBoundary !== null) {
68      // 附加监听器
69      attachPingListener(root, wakeable, rootRenderLanes);
70      
71      // 标记边界需要显示fallback
72      suspenseBoundary.flags |= DidCapture;
73    }
74  }
75}

Promise的包装与状态追踪、SuspenseList的协调

TYPESCRIPT
复制
1// SuspenseList：协调多个Suspense组件的加载顺序
2interface SuspenseListProps {
3  children: ReactNode;
4  revealOrder?: 'forwards' | 'backwards' | 'together';
5  tail?: 'collapsed' | 'hidden';
6}
7
8function SuspenseListComponent(props: SuspenseListProps) {
9  const { children, revealOrder = 'forwards', tail } = props;
10  
11  // 根据revealOrder决定显示策略
12  // forwards: 按顺序显示，前面的加载完成才显示后面的
13  // backwards: 反向显示
14  // together: 全部加载完成后一起显示
15  
16  return (
17    <SuspenseListContext.Provider value={{ revealOrder, tail }}>
18      {children}
19    </SuspenseListContext.Provider>
20  );
21}
22
23// 使用示例
24<SuspenseList revealOrder="forwards" tail="collapsed">
25  <Suspense fallback={<Skeleton />}>
26    <ProfileData />
27  </Suspense>
28  <Suspense fallback={<Skeleton />}>
29    <FriendsData />
30  </Suspense>
31  <Suspense fallback={<Skeleton />}>
32    <PhotosData />
33  </Suspense>
34</SuspenseList>

8.2.2 HTML流式传输

React 18支持服务端渲染的流式传输，允许浏览器渐进式接收和渲染HTML。

NDJSON格式与渐进式增强的DOM占位机制

TYPESCRIPT
复制
1// 流式SSR架构
2
3// 服务端：流式渲染
4async function renderToPipeableStream(
5  children: ReactNode,
6  options: RenderToPipeableStreamOptions
7): Promise<PipeableStream> {
8  const request = createRequest(children, options);
9  
10  // 开始流式渲染
11  startWork(request);
12  
13  return {
14    pipe(response: ServerResponse): void {
15      const stream = createOutputStream(response);
16      startFlowing(request, stream);
17    },
18  };
19}
20
21// 流式传输格式
22/*
23初始HTML：
24<html>
25  <head>...</head>
26  <body>
27    <div id="root">
28      <!-- 同步渲染的内容 -->
29      <nav>...</nav>
30      
31      <!-- Suspense边界占位 -->
32      <template id="B:1"></template>
33      <div hidden id="S:1">
34        <p>Loading comments...</p>
35      </div>
36    </div>
37  </body>
38</html>
39
40后续流（当Suspense resolve后）：
41<div hidden id="S:1">
42  <!-- 实际内容 -->
43  <div class="comments">...</div>
44</div>
45<script>
46  // 替换占位符
47  $RC(1);
48</script>
49*/
50
51// 客户端水合策略
52function hydrateRoot(
53  container: Document | Element,
54  initialChildren: ReactNode,
55  options?: HydrationOptions
56): Root {
57  // 创建并发根
58  const root = createHydrationContainer(
59    initialChildren,
60    container,
61    ConcurrentRoot,
62    options
63  );
64  
65  // 渐进式水合
66  // 1. 立即水合同步内容
67  // 2. 延迟水合Suspense边界内的内容
68  
69  return root;
70}

SSR中的Suspense边界与水合策略

TYPESCRIPT
复制
1// 服务端组件（RSC）与Suspense
2async function ServerComponent() {
3  // 异步数据获取
4  const data = await fetchData();
5  
6  return <ClientComponent data={data} />;
7}
8
9// Suspense边界配置
10function App() {
11  return (
12    <html>
13      <body>
14        <nav>同步导航</nav>
15        
16        {/* 这个Suspense边界会在服务端渲染fallback */}
17        <Suspense fallback={<Spinner />}>
18          <ServerComponent />
19        </Suspense>
20        
21        {/* 另一个Suspense边界 */}
22        <Suspense fallback={<Skeleton />}>
23          <Comments />
24        </Suspense>
25      </body>
26    </html>
27  );
28}

8.2.3 use的Promise解包

React 18.3+引入了use API，用于在组件中解包Promise。

Context与Suspense的集成读取

TYPESCRIPT
复制
1// use API（实验性）
2// 可以在条件语句中使用，与useContext不同
3
4function Component({ shouldShowUser }: { shouldShowUser: boolean }) {
5  // 可以在条件中使用
6  if (shouldShowUser) {
7    // use会挂起组件直到Promise resolve
8    const user = use(fetchUser());
9    return <div>{user.name}</div>;
10  }
11  
12  return <div>No user</div>;
13}
14
15// 与Context结合
16function ThemedComponent() {
17  // use可以读取Context
18  const theme = use(ThemeContext);
19  
20  return <div style={{ color: theme.primary }}>Themed</div>;
21}
22
23// unwrap API的类型约束与错误处理
24function DataComponent() {
25  try {
26    const data = use(fetchData());
27    return <div>{data}</div>;
28  } catch (error) {
29    // 处理错误
30    return <ErrorDisplay error={error} />;
31  }
32}

8.3 Transitions与Deferred Values的并发控制

Transitions和Deferred Values是React 18提供的并发控制工具。

8.3.1 startTransition的标记机制

startTransition用于标记非紧急更新，允许React在渲染过程中保持响应。

isTransition优先级位与并发更新的标记传播

TYPESCRIPT
复制
1// startTransition实现
2function startTransition(
3  setPending: (pending: boolean) => void,
4  callback: () => void,
5  options?: StartTransitionOptions
6): void {
7  const previousPriority = getCurrentUpdatePriority();
8  
9  try {
10    // 设置Transition优先级
11    setCurrentUpdatePriority(TransitionPriority);
12    
13    // 标记pending状态
14    setPending(true);
15    
16    // 执行回调
17    callback();
18  } finally {
19    // 恢复优先级
20    setCurrentUpdatePriority(previousPriority);
21    setPending(false);
22  }
23}
24
25// useTransition Hook
26function useTransition(): [boolean, (callback: () => void) => void] {
27  const [isPending, setPending] = useState(false);
28  
29  const startTransition = useCallback((callback: () => void) => {
30    startTransitionImpl(setPending, callback);
31  }, []);
32  
33  return [isPending, startTransition];
34}
35
36// 使用示例
37function SearchResults() {
38  const [isPending, startTransition] = useTransition();
39  const [query, setQuery] = useState('');
40  const [results, setResults] = useState([]);
41  
42  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
43    const value = e.target.value;
44    
45    // 紧急更新：更新输入框
46    setQuery(value);
47    
48    // 非紧急更新：更新搜索结果
49    startTransition(() => {
50      setResults(search(value));
51    });
52  };
53  
54  return (
55    <div>
56      <input value={query} onChange={handleChange} />
57      {isPending && <Spinner />}
58      <Results data={results} />
59    </div>
60  );
61}

非紧急更新的UI保持响应策略与并发状态的类型表示

TYPESCRIPT
复制
1// 并发状态的类型表示
2type ConcurrentState<T> =
3  | { status: 'pending'; current: T }
4  | { status: 'transitioning'; current: T; pending: T }
5  | { status: 'committed'; current: T };
6
7// 使用useDeferredValue
8function DeferredExample() {
9  const [text, setText] = useState('');
10  
11  // deferredText会在text变化后延迟更新
12  // 允许UI保持响应
13  const deferredText = useDeferredValue(text);
14  
15  // 使用isPending检查是否有过渡
16  const isStale = deferredText !== text;
17  
18  return (
19    <div>
20      <input 
21        value={text} 
22        onChange={e => setText(e.target.value)}
23        style={{ opacity: isStale ? 0.5 : 1 }}
24      />
25      {/* 使用deferredText渲染可能较慢的组件 */}
26      <SlowList text={deferredText} />
27    </div>
28  );
29}

8.3.2 useDeferredValue的滞后渲染

useDeferredValue用于延迟某些状态的更新，保持UI响应。

双版本保持(tearing)问题与一致性保障

TYPESCRIPT
复制
1// tearing问题示例
2function TearingExample() {
3  const [count, setCount] = useState(0);
4  const deferredCount = useDeferredValue(count);
5  
6  // 问题：count和deferredCount可能不一致
7  // 导致UI显示不一致的状态
8  
9  return (
10    <div>
11      <p>Count: {count}</p>
12      <p>Deferred: {deferredCount}</p>
13    </div>
14  );
15}
16
17// 解决方案：使用一致性检查
18function ConsistentExample() {
19  const [count, setCount] = useState(0);
20  const deferredCount = useDeferredValue(count);
21  
22  // 使用isTransitionPending检查一致性
23  const isStale = deferredCount !== count;
24  
25  return (
26    <div style={{ opacity: isStale ? 0.7 : 1 }}>
27      <ExpensiveTree value={deferredCount} />
28      {isStale && <div>Updating...</div>}
29    </div>
30  );
31}
32
33// useMemo的依赖延迟更新与乐观UI的冲突解决
34function OptimisticExample() {
35  const [items, setItems] = useState([]);
36  const deferredItems = useDeferredValue(items);
37  
38  // 使用deferredItems作为缓存依赖
39  const sortedItems = useMemo(
40    () => [...deferredItems].sort((a, b) => a.price - b.price),
41    [deferredItems]
42  );
43  
44  const handleAdd = (item) => {
45    // 乐观更新
46    setItems(prev => [...prev, item]);
47    
48    // 异步提交
49    api.addItem(item).catch(() => {
50      // 回滚
51      setItems(prev => prev.filter(i => i.id !== item.id));
52    });
53  };
54  
55  return <ItemList items={sortedItems} onAdd={handleAdd} />;
56}

本章深入探讨了React的并发特性，包括Lane优先级模型、Suspense架构和Transitions机制。这些特性是React 18的核心竞争力，使得React应用能够在保持响应的同时处理复杂的渲染任务。

理解并发特性对于开发现代React应用至关重要，特别是在处理大型列表、路由切换和搜索过滤等场景时。在下一部分中，我们将探讨性能工程和量化优化，建立系统的性能优化方法论。