React Compiler有什么优化原理？ Fiber如何实现跨组件树的并发？虚拟化如何减少Commit阶段工作量？

React Compiler（代号 React Forget）的本质是将运行时的性能优化工作转移到了编译时。它不再依赖开发者手动写 useMemo 或 React.memo，而是像一位不知疲倦的专家，在构建阶段自动分析并优化你的代码。

AST 静态分析与“记忆化”植入
- 原理：Compiler 会解析你的组件代码生成抽象语法树。它会分析组件内的每一个变量、函数和对象。
- 优化：如果它发现某个计算结果（比如 const total = price * quantity）依赖的 price 和 quantity 没有变化，它会自动给这段代码包裹一层类似 useMemo 的逻辑（但在底层是更高效的指令），跳过这次计算。
- 结果：你写的是普通的 JavaScript，但运行的是经过极致优化的代码。
细粒度反应性
- 传统痛点：在 React 18 中，如果父组件更新，默认会递归更新所有子组件，除非你手动加 memo。
- Compiler 方案：它能识别出组件树中具体哪一部分 JSX 发生了变化。
- 举例：在一个列表中，Compiler 能精确识别出只有“第 3 个商品的价格”变了，它生成的代码会只更新那个特定的文本节点，而完全跳过列表中其他 99 个商品的组件渲染。这实现了类似 SolidJS 或 Svelte 的细粒度更新。
智能依赖推断
- 它解决了 useEffect 依赖数组漏写的痛点。Compiler 会分析闭包内的所有引用，自动补全依赖项，既保证了安全性，又避免了过度更新。

严格来说，Fiber 本身是在单棵树上工作的，所谓的“跨组件树并发”，在 React 源码中是通过多棵 Root 树配合同步调度来实现的。

假设你有一个主应用树（背景页面）和一个模态框树（Dialog）。你想让模态框的动画流畅运行，同时允许用户在背景页面进行低优先级的操作。

多 Root 实例
- React 允许创建多个 createRoot。模态框通常会被挂载到一个新的 Root 或者通过 Portal 挂载。
- 这意味着内存中存在两棵独立的 Fiber 树：Root A（主应用）和 Root B（模态框）。
调度器的统一指挥
- 虽然树是独立的，但它们共享同一个Scheduler（调度器） 。
- 当 Root A 正在处理一个低优先级的渲染任务（比如渲染大列表）时，用户打开了 Root B（模态框）。
- 用户点击模态框，触发了一个高优先级（Sync/Default Lane） 更新。
抢占式执行
- Scheduler 会立刻暂停 Root A 的工作（因为它是低优先级的）。
- 立即调度 Root B 的更新。
- 由于 Root B 的更新优先级更高，它会在当前的“时间切片”中优先执行 Commit。
视觉上的“并发”
- 用户看到的是：模态框瞬间弹出并流畅动画，而背景页面的列表渲染似乎“暂停”了，等模态框动画结束后才继续加载。
- 这就是所谓的跨树并发：通过优先级的差异，让不同的 Fiber 树在同一个事件循环中交替执行。

Commit 阶段是同步且不可中断的，因此它是性能优化的“深水区”。虚拟化（Virtualization）是解决长列表 Commit 卡顿的终极手段。

Commit 阶段的主要工作包括：

假设有一个 10,000 行的列表：

无虚拟化（灾难现场）
- Render 阶段：生成 10,000 个 Fiber 节点。
- Commit 阶段：React 必须遍历这 10,000 个节点，执行 DOM 操作将它们全部挂载。浏览器需要计算 10,000 个 DOM 节点的布局。
- 结果：主线程被长时间阻塞，页面白屏或卡死。
有虚拟化（精准打击）
- 原理：只渲染可视区域（Viewport）内的元素（例如 20 行）加上少量的缓冲区域（Buffer）。
- Commit 阶段的变化：
  - DOM 节点极少：无论数据源多大，真实 DOM 树中永远只有约 20-30 个节点。Commit 阶段只需要操作这几十个节点。
  - 布局计算快：浏览器只需要计算 30 个节点的位置，耗时几乎可以忽略不计。
  - 副作用减少：只有这 30 个组件的 useEffect 会被执行。
复用与位移
- 当你滚动列表时，虚拟化库（如 react-window）不会销毁旧组件再创建新组件。
- 它会复用现有的 Fiber 节点和 DOM 节点，只是改变它们的 transform: translateY(...) 样式或内容。
- Commit 工作量：从“创建/销毁 100 个节点”变成了“更新 100 个节点的样式属性”。这在浏览器引擎中是极快的操作。

总结：虚拟化通过限制 DOM 节点总数，直接切断了 Commit 阶段耗时随数据量线性增长的可能性，保证了无论列表多长，Commit 阶段都能在一个时间切片（~5ms）内完成。

React Compiler有什么优化原理？ Fiber如何实现跨组件树的并发？ 虚拟化如何减少Commit阶段工作量？