React 相关概念

现代框架如何描述 UI？

现代框架基本上都认为“UI 本质上与逻辑存在耦合的部分”，开发者可以：

• 在 UI 上绑定事件

• 在状态变化后改变 UI 的样式或结构

所以有两种主流“描述 UI 的方案”：

• JSX

• 模板语言

JSX

JSX 是一种“类 XML 语法”的 ECMAScript 语法糖，是对 ECMAScript 的一种类 XML 的语法扩展，但它没有定义任何语意，其专门提供给预处理器使用。

React 使用 JSX 描述 UI 有两个原因：

• 前端工程师熟悉 HTML，并且使用 JS 编写逻辑，因此，如果同样使用 JS 描述 UI，即可使 UI 与逻辑配合更密切。

• JSX 能够灵活地与其他 JS 语法组合使用，这种灵活性使 JSX 可以轻松描述“复杂的 UI”，与逻辑结合，即可轻松描述“复杂的 UI 变化”。但是高灵活性意味着 JSX 需要牺牲“潜在的编译时优化空间”。

模板语言

模板语言是从后端发展而来的，早期 PHP（Hypertext Preprocessor 超文本处理器）更多是作为 HTML 模板语言出现的，之后许多编程语言都实现了 PHP 风格的模板语法：

• 基于 Java 的 JSP

• 基于 PHP 二次封装的 smarty

• 基于 ES 的 EJS

虽然这类模板语法的功能强大，但是当页面结构复杂时，逻辑会不可避免地与 UI 结合起来应用。

为了更好地展示 UI，“重 UI 轻逻辑”的模板解析引擎 Mustache 出现。

虽然 Mustache 能够简练、直观地表达 UI，但是缺失逻辑的表达能力。所以一些模板语法尝试在 UI 与逻辑之间寻找平衡，或者在原有的 HTML 语法基础上进行扩展。

模板语法的优点是：其 UI 与逻辑都是合法的 HTML 语法，可以直接在浏览器中正常显示“未替换的原始模板页面”。

JSX 与模板语法的差异

模板语法的出发点：既然前端框架使用 HTML 描述 UI，就扩展 HTML 语法，使它能够描述逻辑。即“从 UI 出发，扩展 UI，描述逻辑”

JSX 的出发点：既然前端框架使用 JS 描述逻辑，那就扩展 ES 语法，使它能够描述 UI，即“从逻辑出发，扩展逻辑，描述 UI”

现代框架的在“编译”时有哪些不同方案？

编译有什么作用？

• 将“框架中描述的 UI”转换为宿主环境可识别的代码

• 代码转化，比如将 ts 编译为 js、实现 ployfill 等

• 执行一些编译时优化

• 代码打包、压缩、混淆

编译执行的两个时机

• AOT：Ahead Of Time 提前编译或预编译，代码在构建时执行编译，宿主环境获得的是编译后的代码

• JIT：Just In Time 即时编译，代码在宿主环境执行时，在宿主环境中编译并执行。