一、Taro 的整体原理是什么？（开场必问）
标准回答：
Taro 是一个 以编译期为主、运行时为辅 的跨端解决方案。
通过 AST 编译 将 React / Vue 代码转换为各端（小程序、H5、RN）可运行的代码，并在运行时通过一层 Runtime 适配生命周期、事件和 API。
关键词一定要说：
- 编译期
- AST
- Runtime
- 多端适配
二、Taro 为什么不能像 React Native 那样纯运行时？
核心原因：小程序限制
- 没有 DOM
- 有独立模板语言（WXML）
- setData 有性能限制
- 事件模型不同
👉 只能靠编译期把 JSX 转成模板
一句话总结：
小程序不是 Web，必须在编译期解决结构差异。
三、Taro 编译期具体做了什么？
1️⃣ AST 解析
- Babel 解析 TS / JSX
- 分析 render / template
2️⃣ JSX → 模板
<View>{title}</View>
👇
<view>{{title}}</view>
3️⃣ 样式转换
- px → rpx
- scss → wxss
- RN → StyleSheet
4️⃣ 多端产物输出
dist/weapp
dist/h5
dist/rn
四、Taro 的运行时（Runtime）是干什么的？
一句话：
编译期解决“结构”，运行时解决“行为”。
Runtime 负责：
- 生命周期对齐
- setState → setData
- 事件系统适配
- API 抹平（request、storage）
五、Taro 中 setState 是如何工作的？（高频）
this.setState({ count: 1 })
👇
实际流程：
- state diff
- 生成最小数据路径
- 合并 setData
- 批量更新
为什么性能会差？
- setData 频繁
- 深层对象
- 大列表
👉 面试可补一句：
Taro 做了 diff，但仍然比不上手写原生。
六、Taro 中事件是怎么绑定的？
<Button onClick={handleClick} />
👇 编译后：
<button bindtap="handleClick"></button>
Runtime 做的事：
- this 绑定
- 参数标准化
- 模拟事件对象
- 冒泡 / 捕获兼容
七、Taro API 是怎么做到跨端的？
Taro.request()
👇 实际映射：
| 平台 | 实现 |
|---|---|
| 微信 | wx.request |
| H5 | fetch / axios |
| RN | 原生模块 |
👉 统一接口，不同实现
八、Taro H5 和小程序的本质区别？
H5 端：
- 基本就是 React
- ReactDOM 渲染
- Taro API 封装
小程序端：
- 模板 + setData
- 没有 DOM
- 强依赖编译期
结论：
Taro 在 H5 是“轻运行时”，在小程序是“重编译”。
九、Taro 性能瓶颈在哪？（必问）
常见瓶颈：
- setData 次数多
- 大列表
- 深层 state
- diff 成本
优化手段：
- 拆 state
- useMemo / useCallback
- 列表分页 / 虚拟列表
- 避免频繁 setState
十、Taro vs UniApp 原理区别（对比题）
| 对比项 | Taro | UniApp |
|---|---|---|
| 思路 | 编译期 | 运行时 |
| 框架 | React / Vue | Vue |
| 灵活性 | 高 | 中 |
| 性能 | 稍低 | 稍稳 |
十一、面试「终极总结话术」（强烈建议背）
Taro 的核心是通过 编译期 AST 转换 把前端框架代码翻译为各端模板，再通过 运行时适配层 对齐生命周期、事件和 API。
编译期解决结构差异，运行时解决行为差异，这是 Taro 能跨多端的根本原因。
