# 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 即时编译，代码在宿主环境执行时，在宿主环境中编译并执行。
