2. 跨端技术基础高频问答：Flutter/RN/Weex 核心概念、生命周期、通信机制
本章聚焦面试中最高频的三大跨端技术对比型问题。面试官常从“原理差异”切入，考察你是否真正理解底层设计，而非仅会写 demo。建议先通读下方对比图，再逐个击破问答卡片。
卡片 1｜Flutter：Widget 三棵树与 State 生命周期
面试问题：请描述 Flutter 中 Widget、Element、Render 三者的关系，以及 State 的生命周期。
面试官考察点：是否真正理解 Flutter 渲染管线；能否用简洁语言区分三棵树角色；生命周期各阶段触发时机。
回答框架：
① 三棵树定义：Widget（配置描述）→ Element（实例持有状态）→ Render（布局绘制）
② 对应关系：每个 Widget 对应一个 Element，但只有 RenderObjectWidget 才对应 RenderObject
③ State 生命周期：initState → build → setState → didUpdateWidget → deactivate → dispose
简短示例回答：
“Widget 是描述 UI 的不可变配置，Element 是创建并持有状态的可变对象，RenderObject 负责布局和绘制。State 生命周期从 initState 开始，每次 setState 触发 build，组件被移除时走 dispose 释放资源。”
可能追问：
• 为什么 Flutter 选择三棵树而非更少层级？
• 什么情况下会触发 didUpdateWidget？
• GlobalKey 如何影响 Element 复用？
避坑提醒：
不要混淆 Widget 和 Element 的“更新”概念——Widget 重建不等于 Element 重建。实际面试中常见错误是将 State 生命周期与组件生命周期等同。
卡片 2｜React Native：JSBridge 与原生模块通信
面试问题：React Native 如何实现 JavaScript 与原生端的通信？请简述其核心机制。
面试官考察点：对 JSBridge 底层实现的理解；能否区分同步/异步调用；是否了解原生模块注册与回调。
回答框架：
① JSBridge 是 RN 通信核心，JS 端通过序列化 JSON 消息发送到原生侧
② 原生侧通过 Native Modules 接收，执行后异步返回结果
③ 批量处理：JS 线程将调用打包成 batch，一次传递减少性能开销
简短示例回答：
“JS 调用原生方法时，消息会序列化后通过 JSBridge 传给 Native 侧。Native Modules 执行后在下一个 JS 帧通过回调返回结果。所有通信都是异步且批量发送，避免主线程阻塞。”
可能追问：
• 如何实现同步调用？什么场景下才允许？
• 如果原生模块抛出异常，JS 侧会 crash 吗？
• 新架构 Fabric 的 JSI 如何优化通信效率？
避坑提醒：
切勿回答“JS 直接调用原生函数”——RN 通信本质是序列化消息传递。面试时补充“批量处理和 JSON 编解码”项，能体现深度。
卡片 3｜Weex：JS Bundle、Native Render 与 Vue 生命周期
面试问题：Weex 如何将 Vue 页面渲染为原生组件？请说明其整体流程。
面试官考察点：是否理解 Weex 的“Vue 运行时 + 原生渲染”架构；对 JS Bundle 生成、桥接通信、生命周期映射的掌握。
回答框架：
① 开发阶段：Vue 代码经 weex-loader 打包为 JS Bundle
② 运行时：JS 引擎（如 JSC）执行 Bundle，通过 JSBridge 向 Native 发送渲染指令
③ 原生侧：解析指令调用对应原生组件（TextView/ImageView 等），渲染成真实 UI
④ 生命周期映射：Vue 生命周期通过钩子映射到 Native 渲染阶段
简短示例回答：
“Weex 中的 Vue 组件在 JS 引擎中执行，通过 JSBridge 将渲染指令传递给 Native 线程。Native 根据指令创建原生视图并挂载。Vue 的 mounted 钩子对应原生视图已渲染完毕的时刻。”
可能追问：
• Weex 如何支持自定义原生组件？
• 与 RN 相比，Weex 在通信模型上有何差异？
• Weex 2.0 为何不再维护？技术债主要体现在哪些方面？
避坑提醒：
不要只说“Vue 写页面、原生渲染”，要体现“JS Bundle 在独立引擎中执行”这个关键点。面试官会追问 Bundle 是如何被加载和执行的。
| 对比维度 | Flutter | React Native | Weex |
|---|---|---|---|
| 核心语言 | Dart | JavaScript | JavaScript (Vue) |
| 渲染引擎 | Skia 自绘 | 原生组件 + Yoga 布局 | 原生组件 + CSS 布局 |
| 通信方式 | Platform Channel (Dart → C++) | JSBridge (异步批量) | JSBridge (双向回调) |
| 生命周期模型 | State 生命周期 | React 组件生命周期 | Vue 组件生命周期 |
| 性能瓶颈 | Dart Isolate 通信 | Bridge 排队 & 序列化 | JS 线程与 UI 线程同步 |
💡 面试加分点：当被问到“你用过哪个跨端方案”时，主动说出“Flutter 的三棵树优化了布局效率、RN 的异步桥可能产生通信延迟、Weex 更依赖 Vue 生态”——能立刻体现技术广度。