深入 React 的并发性

常见并发机制

手机端的长任务（Long Task）是电脑端的 12 倍。
一般来讲，任务执行策略分为三种。

Screen Shot 2022-11-12 at 12.40.38.png

平行 (Parallelism)

平行 (Parallelism)，即多个 task 同时在多个 CPU 执行。
在浏览器端通过 Worker 实现。有如下特点：

• 通过 Message-Passing 交换数据。
• 无法访问主页面的变量，主页面也无法访问 Worker 的变量
• 无法访问 DOM，或者十分的复杂
• 两种模式：Actors & Shared Memory

Actors

• 每个 Actor 全权负责自有数据。
• Actor 只能接受或者发送消息。
• 主线程是负责页面 UI 的一个 Actor
• postMessage，触发并忘记的机制。 不关心，留存或者跟踪请求和相应的详细情况。
• 需要对两方面保持平衡，一方面是 worker 太少，某些 worker 可能太忙，导致发送的任务需要等待；另一方面是worker 太多，不同 Worker 沟通成本可能过高。

Shared Memory

• 通过 SharedArrayBuffer 共享内存。
• 通过 postMessage 发送共享内存时，可以得到这块内存 （而不是复制）。
• 浏览器没有 API 来并发访问共享对象。
• 需要自己构建机制来并发访问共享对象，例如 mutex。
• 不能通过直观的 Object / Array 来访问内存，只能访问 bit 序列 级别的数据。

Web Assembly

• Shared Memory 的最佳实践
• 不如 Javascript 开发体验舒服
• 在 WASM 内部，可以获得较快的执行速度
• Javascript 在操作 DOM 时会比 WASM 快一些。例如 React 在操作 DOM 这方面比 WASM 原生支持要快。

Worker 和 WASM 知名库

• Atomics
• BufferBackedObject
• Comlink
• WorkerDOM

Worker

• 擅长数据处理和数值计算
• 难以处理 UI 相关事物
• 难以调度

并发 (Concurrency)

只有一个 CPU，通过时间分片执行多个任务。

时序调度 (Scheduling)

类似并发，不过有一个程序专门负责调度其他任务，例如制定任务优先级等。

React concurrency = Scheduling in React

主要机制

React 并发，指的是 React 的时序调度，包括一下主要特性：

• Heuristics 启发性：通过一个可中断渲染线程协调多任务。（Cooperative MultiTasking With a single interruptible rendering thread）
• Priority Levels 优先级：在浏览器上挂载不同优先级的回调。（Register callbacks with different priority levels in the browser）
• Render Lanes 渲染通道：通过位掩码实现的抽象。带来了(执行)粒度，避免透支，允许批处理。（Abstractions around bitmask; bring Granularity, Avoid Overhead & Allow Batching）

React 时序调度

• 多任务协调模型 （A Cooperative MultiTasking Model）
• 一个单一的可中断渲染线程 (A Single Interruptible Rendering Thread)
• 渲染过程可以被其他主线程任务（包括其他 React 渲染任务）中断
• 可以在后台更新，从而不阻塞相应输入

Heuristics 启发性

• 每 5ms 就让位给主线程 （React yields execution back to the main thread every 5 ms）
• 即使在 120 FPS 的设备上，也要小于一个时间片，不会阻塞动画 （It's smaller than a single frame even on 120 FPS, so it won't block animation）
• 事实上，渲染是可中断的。

Priority Level 优先级

react / scheduler / src / SchedulerPriorities.js

export type PriorityLevel = 0 | 1 | 2 | 3 | 4 | 5;

export const NoPriority = 0;
export const ImmediatePriority = 1;
export const UserBlockingPriority = 2;
export const NormalPriority = 3;
export const LowPriority = 4;
export const IdlePriority = 5;

优先级	超时	时机
Immediate	同步执行 (Synchronously)	需要立即执行的任务
UserBlocking	250ms	用户操作产生的结果 (例如按钮点击)
Normal	5S	无需实时的更新
Low	10S	可以延迟却必须完成的任务 (例如某些页面通知)
Idle	无延迟	根本无需执行的任务 (例如屏幕外的更新)

Render Lanes 渲染通道

Render Lanes 是在位掩码上构建的一种抽象。

• 一个通道 (Lane) - 位掩码中的一位
• React 的一次更新 = 一个通道
• 相同通道的更新在一个批次 (batch) 执行，不同的通道在不同的批次执行。
• 因为是通过位实现的，粒度最多有 31 级
• 多状态转换 ( Multiple Transitions ) 可以选择是单一的批次，或者相互独立执行。
• 减少一些场景下的消耗，例如多次布局，样式计算或者多次浏览器绘图 (paint)

有啥用

可以使用 useTransition 处理大量数据。

能绘制更多的数据点，或在 canvas 上绘制，或者进行数据处理

• useTransition 效果比 worker + redux-saga + debounce 强。
• useTransition 效果比 虚拟渲染(Virtualization) 和 缓存(Memorization) 强

使用 useSyncExternalStore 防止无用的渲染

function Pathname() {
  const { pathname } = useLocation();
  return <Badge title={pathname} subTitle="pathname" />;
}
function Hash() {
  const { hash } = useLocation();
  return <Badge title={hash} subTitle="hash" />
}

通过 const { hash } = useLocation();，即使是 hash 没有变化，location 的其他部分有变化，后续组件也会重新渲染。
可以通过一个新的 hook 来提升效能。

function usHistorySelector(selector) {
  const history = useHistory();
  return useSyncExternalStore(history.listen, () => selector(history));
}
function Pathname() {
  const pathname = usHistorySelector(history => history.location.pathname);
  return <Badge title={pathname} subTitle="pathname" />;
}
function Hash() {
  const pathname = usHistorySelector(history => history.location.hash);
  return <Badge title={hash} subTitle="hash" />
}

通过选择性的 hydration 和 React 并发 提升 hydration 效能

以前必须全部 hydration 才可以，现在可以选择性的 hydration。原来快的组件需要等慢的组件，现在也无需等待。

更强大的分析器，检查 Transition，得到更多 Warns，以及更多

Screen Shot 2022-11-13 at 16.06.34.png

展望

• 使用 react-fetch 进行 I/O
• 原生支持的 <Cache /> 以用来数据获取，可以与 <Suspense /> 配合使用。
• <Suspense> 可以跳过 CPU 消耗过多的 DOM 树
• useInsertionEffect 来插入 CSS
• <Offscreen /> 组件来控制不在屏幕内的组件，可以将 Idle 优先级赋给某个任务
• Server Component，服务器端组件

浏览器原生支持的时序调度

• Prioritized Task Scheduling API
• 比 requestIdleCallback, setTimeout 更强壮的时序调度
• 基于 Promise 的，直接继承在 event loop 内
• 与 React 核心团队，Google , W3C 达成一致

主要 API

• scheduler.postTask() ，调度，控制并调整任务优先级
• scheduler.yield(), 将控制权交还给主线程，可以通过重新调度，从中断的地方继续执行。
• scheduler.wait(), 将控制权交还给主线程，等待一段时间或者等待某个事件以后继续执行。
• isInputPending()，检查当前任务是否阻塞了用户输入。

总结

• Rethinking Reactivity, React is not Reactive

  • React is NOT Reactive，但它是并发的，这可能就够用了

• React 正在推动 Web API 向前，例如 Prioritized Task Scheduling API

• React Concurrent 不一定会带来更好的性能。

• 使用啥技术最终还是看是否能产生业务价值。