Skip to main content

React Native 渲染流水线（Render、Commit、Mount）

下面是这个链接的中文总结，以及如何将其运用到面试中的建议。

📘 总结：React Native 渲染流水线（Render、Commit、Mount）​

该文档介绍的是 新架构（New Architecture）下的渲染流程。整个流水线把 React 组件转换成真正的平台原生视图，分为三个阶段：

1. 渲染阶段（Render）​

  • 在 JavaScript 中执行 React 逻辑，生成 React 元素树。
  • 同时，C++ 层会为每一个宿主组件（如 <View>、<Text>）同步创建一个 React 影子节点（Shadow Node），组装成 React 影子树。
  • 影子树是不可变的，更新时会克隆产生新树。
  • 注意：自定义组件（Composite Component）不会产生对应的影子节点。

2. 提交阶段（Commit）​

  • 计算布局：调用 Yoga 引擎计算每个影子节点的位置和大小。部分组件（如 Text）的布局需要调用宿主平台计算。
  • 提升树：把新生成的影子树标记为 “下一棵要挂载的树”。
  • 该阶段通常在后台线程异步执行，避免阻塞 UI。

3. 挂载阶段（Mount）​

  • 树对比（Diff）：在 C++ 中比较 “上一棵已渲染树” 和 “下一棵树”，生成原子操作（如 createView、updateView、removeView）。
  • 提升渲染树：将 “下一棵树” 原子性地提升为 “已渲染树”。
  • 视图挂载：在 UI 线程上同步执行原子操作，生成真正的宿主视图（如 Android 的 ViewGroup、iOS 的 UIView）。
  • 视图扁平化：在 diff 时减少不必要的嵌套节点，通常 600-1000 个影子节点会减少到 200 个左右。

初始渲染 vs. 状态更新​

  • 初始渲染：没有 “上一棵树”，diff 结果全是创建操作。
  • 状态更新：React 会克隆受影响的节点及其祖先，未变化的节点被共享（结构共享）。挂载阶段 diff 后只生成最小更新，例如只发一个 updateView 修改背景色。

特殊：C++ 状态更新（如 ScrollView 的偏移量）​

  • 跳过渲染阶段（React 不参与），更新可来自任何线程。
  • 通过克隆影子节点并尝试提交，直到成功，避免竞态条件。

🎯 如何用到面试中​

掌握这个新架构的渲染流水线可以明显提升面试评价。下面是一些具体用法：

1. 回答 “React Native 的工作原理是什么？”​

不要只说 “JavaScript 和原生通信”，而是：

“新架构下有一套 渲染流水线：渲染阶段在 JS 中生成元素树，同时在 C++ 中构建不可变的影子树；提交阶段在后台线程计算布局；挂载阶段在 UI 线程做 diff 并生成最小的原子更新。比如视图扁平化可以把 1000 个节点减少到 200 个左右，提升性能。”

2. 解释性能优化（例如 FlatList 卡顿原因）​

“旧架构的布局计算可能阻塞 UI 线程。新架构在提交阶段把布局计算放到后台线程，挂载阶段才到 UI 线程。另外视图扁平化减少了过度绘制。如果卡顿，可以检查是否有频繁触发同步布局的属性（比如文本测量）。”

3. 讨论线程模型​

“渲染阶段在 JS 线程（同步），提交阶段在后台线程（异步布局），挂载阶段在 UI 线程（同步）。这样主线程不会因为大量布局计算而掉帧。”

4. 展示对状态更新的深入理解​

“当某个 style 改变时，React 不会重新生成整个树，而是克隆受影响的节点及其祖先，其他节点共享（结构共享）。挂载阶段只产生一条 updateView 指令，非常高效。”

5. 体现 C++ 状态的知识（进阶）​

“像 ScrollView 的滚动偏移量，属于 C++ 状态，不是由 React 管理的。它跳过渲染阶段，直接在 C++ 中克隆节点并提交，支持从 UI 线程发起更新，这样滚动时不需要来回 JS，更加流畅。”

6. 准备一个 “电梯演讲”​

“React Native 新架构的渲染流水线分为三步：渲染生成不可变的 C++ 影子树，提交在后台计算布局，挂载 diff 并更新实际视图。这种设计结合视图扁平化和结构共享，使 UI 更新既快速又可预测。”

建议你在面试时配合口头描述 三阶段图示（可以简单画在白板上），会给面试官留下非常深刻的技术深度印象。祝你面试顺利！