第 1 章 跨平台开发总览与框架对比
第 1 章 · 跨平台开发总览与框架对比
章节摘要：本章回答"跨平台开发到底值不值、两个框架怎么选"。先讲清跨平台开发解决的成本、效率、覆盖问题与性能、原生能力、UI 一致性等代价，再分别拆解 React Native 与 Flutter 的核心优势和适用场景，最后用一张技术栈、渲染机制、性能、生态的多维对比表收束，给出可执行的选型判断。
先说结论
阅读完本章，你应当能够：
- 从成本、效率、覆盖、维护四个维度说清跨平台开发的价值，并准确列出其代价。
- 说出 React Native 的"学习一次、随处编写"理念与桥接渲染的本质。
- 说出 Flutter 自绘渲染引擎与 Dart 语言的组合为何带来高一致性 UI，并解释其与桥接路线的本质区别。
- 对照技术栈、渲染机制、性能、平台支持、包大小等维度比较两框架差异。
- 依据团队技术栈、性能要求、多平台规划做出初步选型。
核心概念速览
选型没有绝对的对错，只有"是否符合团队现状与产品约束"。本章的价值是让你带着完整的事实去做判断，而不是凭印象站队。
本章全景图
下面这张图把本章要讲的内容画成一棵决策树：左边是跨平台开发要付出的代价，中间是两个框架各自的引擎路径，右边是最终的选型出口。看懂它，本章的骨架就立住了。
子章节导航
1.1 跨平台开发的价值与挑战
从"为什么不能只做原生"切入，把价值拆成成本效益、市场覆盖、体验一致、技术栈复用四条线，再正面回应性能、原生功能访问、UI 一致性、学习曲线与框架依赖五个代价。这一节是全书的地基，后面所有讨论都建立在它上面。读这节时不妨先问自己一句：你现在面临的问题是"预算不够"还是"迭代太慢"？答案不同，关注的价值点也不同。
1.2 React Native 的核心优势与适用场景
聚焦 Meta 出品的 React Native：JavaScript 与 React 心智模型、桥接原生组件渲染、热重载与快速刷新、庞大生态、灵活的原生扩展。适合快速迭代业务应用、前端资源充足的团队、MVP 验证等场景。
1.3 Flutter 的核心优势与适用场景
聚焦 Google 出品的 Flutter：自绘渲染引擎 Skia、Dart 语言、丰富 Widget 组件库、单代码库多平台（移动、Web、桌面）。适合对 UI 一致性、动画、性能要求高的应用与多平台长期项目。
1.4 双框架核心技术差异对比
把两框架放到同一张表格里逐维度对照：技术栈、渲染机制、性能、UI 组件、平台支持、生态、学习曲线、包大小、定制性。最后给出分场景的选型建议，帮助你落定自己的判断。这是全章最"硬核"的一节，也是你日后向别人解释"为什么选它"时最需要引用的一节。
关于选型的一点忠告。很多人在这一步纠结太久。我的建议是：先把两个框架各跑一个 hello world，再做决定。本章给了理论框架，但真正让你下决心的往往是"装环境顺不顺、跑起来快不快、写第一屏代码感觉对不对"这些体感。选型不是一道单选题，它是你用信息换确定性的过程。
子章节之间的逻辑关系
前两节分别立起"为什么需要跨平台"和"代价是什么"，1.2 与 1.3 是两个候选方案的展开，1.4 是收口对比。结构上是一路收窄：从整个领域 → 到两个方案 → 到逐维度对照。读的时候心里带着一根主线：你的产品约束是什么，就找能匹配约束的方案。如果团队里全是 Java 后端转来的同事，Flutter 的强类型与 Dart 语法反而比 JavaScript 更好上手；如果团队已经跑着 React Web 项目，React Native 的共享心智模型就是真金白银。反过来，如果你的产品是金融行情、创意动画这类对帧率敏感的东西，Flutter 的自绘路线会给你更可控的性能预期——这些判断都来自本章后半部分的对照信息。
1.1 需求与代价 ──► 1.2 RN 方案展开 │ │ └────────► 1.3 Flutter 方案展开 │ └► 1.4 逐维度对比与选型
前置知识与后续延伸
- 前置知识：对移动端 iOS 与 Android 的差异有基本认知即可，不需要任何框架经验；若熟悉 Web 开发的组件化与状态驱动思想，理解本章会更快。本章出现的术语（桥接、自绘渲染、声明式 UI）后续章节都会详细展开，第一次看到不要求立刻吃透。
- 后续延伸：本章的选型结论直接影响第 2 章先搭哪套环境；"桥接 vs 自绘"的渲染差异是理解第 4 章组件体系、第 5 章状态管理、第 6 章调试工具差异的背景知识。建议在第 2 章动手前回头再看一遍 1.4 的对比表，把"我为什么选这套环境"这件事想清楚，安装过程会更有目标感。