架构与运行机制 ✅
聚焦 RN 架构/运行时、通信与渲染、旧/新架构迁移与 Hermes。
RN 的整体架构与渲染原理？
答案
核心概念:
RN 采用 JS 线程(React/业务) + 原生 UI 线程(渲染/交互) 的双线程， 通过桥(旧架构)或 JSI(新架构)通信；React 的虚拟树映射为原生控件树。
示例说明:
JS: React 计算 → 生成更新 → 发送给原生
Native: 接收更新 → 渲染 UIView/View → 事件回传 JS
面试官视角:
- 要点清单: 双线程模型；虚拟树 → 原生控件
- 加分项: 知道旧/新通信差异
- 常见失误: 认为 RN 直接编译成原生
延伸阅读:
JS ↔ 原生通信是如何实现的？
答案
核心概念:
旧架构通过异步序列化(Bridge)批量分发；新架构以 JSI 直接对象与函数，延迟更低、同步/异步更灵活。 内核采用 JavaScriptCore(Hermes 可选)。
- RN 向 JS 传递信息
示例说明:
旧: batched JSON message → Bridge → Native
新: JSI function/object binding → direct call
延伸阅读:
Fabric 渲染管线是什么？
答案
核心概念:
Fabric 是新渲染系统，改进布局/测量/提交，支持并发更新与更稳定的 UI 性能，减少中间对象创建。
示例说明:
Shadow Tree → Layout → Mount → Commit （并发友好）
面试官视角:
- 要点清单: 渲染阶段；并发/稳定性
- 加分项: 真实落地与迁移经验
- 常见失误: 认为 Fabric 自动解决重渲染
延伸阅读:
- 官方新架构资料
TurboModule 与旧 NativeModule 的差异？
答案
核心概念:
TurboModule 借助 Codegen 生成类型安全绑定，支持 JSI；更快的模块查找/调用；旧模块基于反射/字符串。
示例说明:
// 代码生成的类型声明(示意)
export interface DeviceSpec { getDeviceName(): Promise<string> }
面试官视角:
- 要点清单: 类型安全；调用路径优化
- 加分项: Codegen 流程与调试
- 常见失误: 混用旧模块导致不兼容
延伸阅读:
- 新架构模块文档
Hermes 引擎的价值与限制？
答案
核心概念:
Hermes 面向 RN 的轻量 JS 引擎，支持字节码预编译、快启、低内存；需关注 Intl/Proxy 等差异与第三方兼容。
示例说明:
收益: 启动/内存；成本: 兼容/体积评估
面试官视角:
- 要点清单: 启动与内存收益；不适用场景
- 加分项: 线上切换评估；字节码缓存
- 常见失误: 忽视 polyfill/Intl
延伸阅读:
UI 组件如何映射到原生控件？
答案
核心概念:
RN 组件(Text/View/Image/ScrollView 等)映射到 iOS 的 UIView 层级/Android 的 View/ViewGroup；平台样式与行为差异需适配。
示例说明:
<Text> → UILabel/TextView, <View> → UIView/ViewGroup
面试官视角:
- 要点清单: 映射关系；差异适配
- 加分项: 跨端组件库沉淀
- 常见失误: 期望 1:1 Web 行为
延伸阅读:
- 组件文档
事件与手势从原生回传 JS 的过程？
答案
核心概念:
原生捕获手势/点击 → 通过 Bridge/JSI 回传 → JS 更新状态/触发动画；复杂手势建议原生驱动(Reanimated/GestureHandler)。
示例说明:
Native touch → dispatchEvent → JS handler → setState/animate
面试官视角:
- 要点清单: 事件来源；回传与延迟
- 加分项: 原生驱动动画；中断策略
- 常见失误: JS 驱动长链路动画
延伸阅读:
- Reanimated/GestureHandler 文档
旧 → 新架构迁移路径与风险？
答案
核心概念:
升级 RN 版本并开启新架构开关，优先改造自研模块/关键三方库；逐步验证 Fabric/TurboModule 兼容性与性能。
示例说明:
步骤：评估 → 升级 → 开关 → 模块改造 → 回归/灰度
面试官视角:
- 要点清单: 库兼容；灰度与回滚
- 加分项: 指标对比报告
- 常见失误: 一次性重构，缺乏回滚
延伸阅读:
- 迁移指南
常见通信与渲染瓶颈有哪些？
答案
核心概念:
频繁跨桥调用、大对象传输、深层次重渲染、图片解码与主线程阻塞；需合并更新/数据裁剪/原生驱动动画/懒加载。
示例说明:
排查：setState 次数/大小 → Bridge 调用数 → 图片 → JS CPU
面试官视角:
- 要点清单: 定位维度；优化策略
- 加分项: 持续监控与阈值告警
- 常见失误: 只凭体验，无数据
延伸阅读:
- Performance 文档