第 3 章 核心语言与声明式 UI 范式

第 3 章 · 核心语言与声明式 UI 范式

章节摘要：本章回答"用什么语言、用什么思维写界面"这个跨平台开发的核心问题。React Native 用 JavaScript/TypeScript 加 JSX，Flutter 用 Dart 加 Widget 树，但两者共享同一个现代 UI 范式——声明式 UI：你描述界面应该长什么样，框架负责让它变成现实。读完本章，你将同时掌握两种语言的基础心智模型，并理解它们殊途同归的界面构建思想。

先说结论

阅读完本章，你应当能够：

1. 说出 React Native 与 Flutter 各自的语言基础与核心语法要素，并指出两者在类型体系上的差异（JS 弱类型配 TS 补强、Dart 天生强类型）。
2. 理解 JSX 的本质：它是 JavaScript 的语法扩展，经编译转为函数调用。
3. 理解 Dart 的强类型、空安全与 Widget 树概念。
4. 说清声明式 UI 与命令式 UI 的本质区别，以及状态如何驱动界面更新。
5. 用"描述界面"的思维方式看代码，而不是"逐步操作界面"。
6. 判断一段 UI 代码是声明式还是命令式，并解释各自的状态处理方式。

核心概念速览

一句话点题：语言是皮，声明式思维是骨。两套语法差异很大，但"描述界面、状态驱动"的思维内核高度一致——这正是双框架对照学习的价值所在。

补充一句给初学者的话：本章的语法细节如果一次记不住，完全不必焦虑。语法是查得到的东西，思维是需要练的东西。优先把"界面是状态的函数"这句话刻进脑子里，语法的边角留在需要时再查。

子章节导航

3.1 JavaScript、TypeScript 与 JSX 基础

从现代 JavaScript 的 let/const、箭头函数、解构赋值、模板字符串、异步处理讲起，再补 TypeScript 的类型系统，最后落到 JSX：它如何描述界面、如何嵌入表达式、如何经转译器编译。这一节是 React Native 代码的语法地基。

这一节的写法是"语法点 + 在组件里的实际用法"。比如解构赋值不只是语法展示，更直接对应到组件里取 props 的惯用写法；箭头函数对应回调函数的简洁表达。语言基础与组件写法交织着讲，是为了让你学完就能看懂第 4 章的真实组件代码，而不是停留在语法背诵。

3.2 Dart 语言基础与 Widget 树

介绍 Dart 的强类型、空安全、变量声明、函数与类，再到 Widget 树概念：界面如何组织成一棵树、StatelessWidget 与 StatefulWidget 的分工。这一节是 Flutter 代码的语法地基。

Dart 对熟悉 Java、C#、TypeScript 的读者几乎没有学习障碍——类、继承、泛型都是熟悉的概念。真正的门槛在于"Widget 树"的思维切换：界面不再是"一层层套 DOM"，而是一棵由 Widget 节点组成的树，每个节点描述一块界面。读这节时建议打开第 2 章建的 Flutter 项目，对照 main.dart 里的实际代码理解 Widget 树的每一层，把抽象概念落到眼前真实的代码上。

3.3 声明式 UI：状态驱动界面更新

把两条路线收拢到同一个思想：声明式 UI 用状态描述界面，状态一变界面自动重建。对比命令式 UI 的"手动操作"，讲清为什么声明式是现代 UI 开发的主流，以及状态在其中的核心角色。

这一节是整个第 3 章的题眼。前面的语法与 Widget 树都是"武器"，这里讲的是"打法"。理解"界面是状态的函数"这个核心命题，等于拿到了读懂两套框架所有 UI 代码的钥匙。读到这里如果觉得抽象，先跳回 2.5 与 2.6 里跑起来的两个示例应用，看看"点一下按钮、界面变了"背后发生了什么，再回来看概念，会发现豁然开朗。

子章节之间的逻辑关系

3.1 与 3.2 是并行的两条语法线，分别建立两种语言的心智模型；3.3 把它们收拢到共同的思想层，解释"为什么两种语言最终都走向声明式"。读的时候可以交叉验证：看到 3.1 的 JSX 条件渲染，回想到 3.2 的 Widget 也是同样逻辑，再到 3.3 统一到"状态驱动"。

这套"先分开讲、再收拢讲"的结构，是全书双框架对照方法的缩影。它不是简单地把两个框架讲两遍，而是先让各自立足，再揭示共同的底层思想。学完本章，你会建立两套语言知识，但只有一套"界面思维"——这套思维在第 4 章会直接转化为"用组件搭界面"的能力。

3.1 JS/TS 与 JSX 语法 ──► 3.3 声明式 UI 共同范式
                              ▲
3.2 Dart 与 Widget 树 ────────┘
​

关于本章的一点阅读提示

三种语言（JS/TS、Dart）与一种思想（声明式）放在同一章，容易让人产生"信息过载"的错觉。其实它们的组织很清晰：语言部分只要抓住"变量、函数、类、异步"四个通用概念，就能在两门语言之间顺畅迁移；思想部分只要抓住"状态到界面的映射"这一句话，就抓住了声明式的全部。本章的练习建议是"双线并进"：一条线跟着 3.1 与 3.2 把两套语法的示例代码各跑一遍，另一条线把 3.3 的思想用第 2 章的两个示例应用对照验证。两线汇合时，语言与思想就一起通了。

前置知识与后续延伸

• 前置知识：第 2 章创建的项目是本章的练习场。有一点编程基础即可——变量、函数、条件、循环这些通用概念在两种语言里都会出现。本章刻意不假设你熟悉 JavaScript 或 Dart 任何一个。
• 后续延伸：本章的语言基础是第 4 章组件体系的直接铺垫——理解了 JSX 与 Widget 树，才能看懂组件如何嵌套、样式如何传递。声明式思维也是第 5 章状态管理的思想前提：状态驱动界面，正是状态管理要解决的"状态从哪来、怎么更新"。建议学完第 5 章再回头读一遍 3.3，第二次读会看到更多层意思。