文档:《 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 \sin x sinx。
- 数据的单向性原则,外部数据与组件交互只能通过 props 传入,状态变化才能导致 View 的变化。
创建组件的步骤:
- 用 HTML 来描述静态的 UI;
- 构造组件的状态空间;
- 暴露组件的交互方式。
<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
- Key 属性的作用
Context API
多个组件之间的通讯问题