附录003《 React 的开发》

文档：《 React 的开发》
作者：燕志伟
时间：2020-06-21
版权：原创

原因

尽管我们是一个后端的 AI 应用，但仍旧要在前端部署一个页面来处理一些用户的操作，所以要写一部分代码。考察了一下前端框架，感觉 Facebook 的 React 还不错。

01. React 的产生历史背景

Facebook 的工程师发现一些问题：

• 传统 UI 操作，对于程序员来讲，细节太多，容易失控。
• 应用程序的状态（数据模型）分散，难以维护，导致程序员 bug 增加。

传统上，程序通过JQuery 的DOM API 函数来操作。但是其函数个数有几百个。其包括四大类：

• selectors,
• attribute/css,
• manipulation,
• traversing。

例如，JQuery 想DOM局部刷新，而 React 是维持状态机，负责刷新。而程序员仅负责状态维护，以及最终 UI 的样子，无需关心如何刷新页面。

React 特点：1个新概念（Concept），4个API，单向数据流（Flux arch），完善的错误消息。

Flux 架构的衍生项目(状态管理框架)

• Redux
• MobX

总之，React 是一个用来创建 UI 的 Javascript 的库；其次它可以让你从小组件（或少量代码）来创建复杂的 UI。

组件(Component)

组件方式是面向对象的编程思路。我们下面来比较传统 UI 模式与 React 组件模式。

• 传统UI模式：先使用 HTML 模板定义 View，动态的数据通过 Javascript 取得并填充到View 中显示。如果有输入，则将 View 上的部分内容（如按钮）绑定Javascript 的界面事件。
• React 组件模式：先使用 类HTML语言定义整个View Tree。View Tree 的每个结点是一种增强的HTML标记关键字。这些增强的 HTML 标记关键字，本质上是用面向对象的原则对MVC进行的封装。

从表面上看，React 扩展了 HTML 的语法和关键字，把代码Control 与数据 Model 在宏观上结合得更紧密，而不是更松散。程序员通过 Components （一种xml-like tag)告诉React 我们想要看到什么。

组件的定义：
组件包括三个部分：外部属性props，内部状态 state，以及外部展示 View。外部属性与内部状态的组合成为一个View。Components 从程序员的角度来讲，是一个黑箱，输入的被称为 props，输出是一个 View（Render函数来做这个）。

注意，在理解 React 组件概念时要注意：

• 属性来自外部，状态是本身有的。
• 组件本质是一个状态机。
• 组件设计时，可以理解成一个纯函数，如 $\sin x$。
• 数据的单向性原则，外部数据与组件交互只能通过 props 传入，状态变化才能导致 View 的变化。

创建组件的步骤：

1. 用 HTML 来描述静态的 UI；
2. 构造组件的状态空间；
3. 暴露组件的交互方式。

<input 
type = "text"
value = {this.state.value}
onChange={evt=>this.setState({value: evt.target.value})
}
/>

创建组件的原则：

• 单一组件原则：每个组件中做一件事，小组件的刷新。
• 数据状态（DRY）管理原则：尽量让外部组件保持states；能计算的状态不要单独存储；内部组件尽量保持无states，所需数据通过 props 获取。

JSX

在JS中写 HTML 标记，动态创建组件。

组件的生命周期

虚拟DOM

1.算法复杂度

2.虚拟 DOM 如何计算 Diff

3. Key 属性的作用

Context API

多个组件之间的通讯问题