React 开发入门 on ClearSec Wiki

环境配置

Mon, 01 Jan 0001 00:00:00 +0000

环境配置

前置环境配置

在继续下面的环境配置之前，本文档默认了你已经安装了高于 v12 的 node，并且可以使用 npm install。

如果安装 Node.js 或者 npm 遇到困难，可以参考 Node.js 的引导文档。

使用 `yarn` 代替 `npm`

这是一个可选项，在实际工程之中两者并没有本质上的差别。与常用的 npm 相比，yarn 大多情况下具有更快的下载速度和更为清晰的命令行输出。所以我们更加推荐使用 yarn。

这里不具体叙述安装过程，可以参考官网上给出的方式进行安装，也可以使用 npm install yarn -g 命令安装（后者可能不适用于 Linux 用户）。

yarn 的命令和 npm 的命令大致具有以下对应关系，更细节的关系则可以参考 npm 的引导文档：

	`npm`	`yarn`
安装指定第三方库	`npm install react --save`	`yarn add react`
移除指定第三方库	`npm uninstall react --save`	`yarn remove react`
开发模式下安装	`npm install react --save-dev`	`yarn add react --dev`

安装 TypeScript

TypeScript 是 JavaScript 的超集。简而言之，TypeScript 就是带有类型系统的 JavaScript。TypeScript 代码可以直接被编译为 JavaScript 代码并执行。

组件、属性与状态

Mon, 01 Jan 0001 00:00:00 +0000

组件、属性与状态

组件 & `render` 函数

React 的一个核心概念就是组件。

组件更像是将 UI 拆分得到的独立可复用的小块，其能够接受属性的传入，并且返回出描述屏幕上的展示内容的 React 元素。

我们将会从类组件入手介绍 React 组件的编写方式。一个经典的类组件的结构如下（即下发框架之中的 App.tsx 文件内容）：

class App extends React.Component {
 render(): ReactElement {
 return <p> Hello, React! </p>;
 }
}

每一个类组件都是 React.Component 类的子类，其中我们需要重载 render 函数以定义这个组件在屏幕上的展示方式（用户界面）。render 函数的返回值为使用标签语法编写的 ReactElement。比如说上述 App 组件就返回了一句问候语，这就代表 App 组件在实例化的时候会渲染出这一句问候语。

说明

语法拓展

React 对 JS/TS 语言作了一定的语法拓展，拓展后的 JS/TS 称为 JSX/TSX，最大差别就是引入了标签语法：

const p = <p>Hello world!</p>;

这类类似于 HTML 标签的语法定义了一个对象，其等价于以下表达：

const p = React.createElement(
 "p",
 undefined,
 "Hello world!"
);

标签对象中允许嵌入 JS/TS 表达式，其会运算出其值后转为字符串嵌入：

const name = "Adam";
const p = <p>Hello, {name}!</p>;

转化为字符串的目的是防止 XSS 攻击。 JSX/TSX 的标签语法和 HTML 类似，允许定义各种属性，这些特性以后会讲到。本文档基于 TSX 语言。

警告

TSX 的限制

生命周期

Mon, 01 Jan 0001 00:00:00 +0000

生命周期方法

React 组件的生命周期

我们在实际的开发之中，前端需要显示的数据、显示数据的方式往往需要根据从后端、公开平台等处拉取的信息确定，那么我们就需要考虑应当何时发起网络请求拉取数据。

在叙述何时拉取数据之前，我们可以先了解一下 React 组件的生命周期，也就是一个 React 组件从构建到解构的全过程：

准备挂载，这个时候属性会被传递到组件的构造函数之中，实例化一个组件，同时创设相应的 state。
挂载组件，这个时候框架调用 render 函数，生成组件的展示方式并渲染，挂载完毕之后会使用 React.Component 类之中定义的 componentDidMount 生命周期方法，表示组件挂载完毕。
监听组件的 setState 方法调用，一旦组件的状态改变，就代表着可能会导致组件的显示方式改变，此时框架会重新调用 render 函数进行重新渲染。
卸载组件，当组件需要被移除的时候，在卸载之前会调用 React.Component 类之中定义的 componentWillUnmount 生命周期方法，表示即将卸载组件。

注意这里提到的 componentDidMount 和 componentWillUnmount 方法，这两个方法会在对应的生命周期时间点由 React 框架自动调用。前者调用时组件已经构建完毕且挂载到 DOM 树上，此时便可以从网络拉取数据并写入对应的成员变量或者调用 this.setState 根据获取的数据重新渲染组件。

而后者调用时意味着组件即将卸载，此时应当清除掉一些即将不使用的、在后台运行占用资源的计时器、事件监听器等对象，保证资源不浪费。

更完整的生命周期

**【注意】**这里可能包含过时乃至危险的编码方法，如果只需要学习生命周期方法的运用可以跳过，本部分仅用于深入了解 React 框架。

如果使用 VS Code 等带有代码提示的工具编写代码，我们可以看到还有很多其他的生命周期方法：

这些方法实际上描述了更为细致的 React 组件生命周期，现在我们逐步表述。

组件挂载
- 首先调用构造函数 constructor()，其接受的参数为组件属性，同时初始化组件状态。在 ES6 JavaScript 类语法糖出现之前，构造函数由 getDefaultProps() 和 getInitialState() 两个方法替代
- 其次调用 componentWillMount() 方法，用户可以 override 该方法实现自定义功能
- 然后调用 render() 方法获取组件的显示方式，渲染组件
- 最后调用 componentDidMount() 方法，用户可以 override 该方法实现自定义功能
组件更新
- 如果是接受新的组件属性进行更新，调用 componentWillReceiveProps() 方法。该方法接受的参数为该组件的新属性
- 首先调用 shouldComponentUpdate() 方法，该方法返回布尔值，表示组件此时是否需要更新。若得到 false，则组件停止更新，否则继续向下执行。该方法接受的参数为该组件的新属性和新状态
- 其次调用 componentWillUpdate() 方法，用户可以 override 该方法实现自定义功能。该方法接受的参数为该组件的新属性和新状态
- 然后调用 render() 方法获取组件显示方式，渲染组件
- 最后调用 componentDidUpdate() 方法，表示组件更新完毕。该方法接受的参数为组件更新前的旧属性和旧状态
组件卸载
- 调用 componentWillUnmount() 方法，用户可以 override 该方法实现自定义功能
组件错误处理
- 调用 componentDidCatch() 方法，用户可以 override 该方法实现自定义功能。该方法接受的参数为错误信息
组件监听的方法调用
- setState() 方法发起组件更新的请求，会触发一次重新渲染，具体用法先前已经讲解
- forceUpdate() 方法发起组件更新的命令，与 setState() 方法不同在其会无视 componentShouldUpdate() 的返回值，正常完成组件更新流程（包括调用 componentDidUpdate() 方法）

总体而言，React 组件的生命周期大致为下图（ES5 版本，不包括组件错误处理和方法监听）：

非常规数据流

Mon, 01 Jan 0001 00:00:00 +0000

非常规数据流

我们先前介绍过 React 的瀑布数据流，也就是父组件向子组件传递数据的数据组织形式。但是有时我们会要求子组件的行为影响父组件，或者多个组件之间共享信息。本部分将会简要介绍如何实现这些非常规数据流。

反向数据流

反向数据流实际上是一个很常见的需求，比如说分页器。分页器在 UI 构成上而言，仅仅是一个网页的部分，但是它的状态却决定了整个网页应当显示的内容。从而我们必须构建从分页器向父组件的数据流，让分页器起到作用。

这里我们沿用先前的代码，考虑一个简化的反向数据流需求。比如说这里，我们希望让点击正方形这个事件，不仅仅改变正方形本身的颜色，还可以改变父组件 App 内部的计数器来显示点击次数。

说明

删掉一些多余的代码

这里我们不涉及生命周期，故可以删除掉 Square 组件内的计时器以及相关的生命周期代码。首先我们需要在父组件 App 的状态中添加一个计数器，并且在构造函数中初始化。修改后的 App 组件为：

// Component 'App'
interface AppState {
 readonly clickCnt: number;
}

class App extends React.Component<Record<string, never>, AppState> {
 constructor(props: Record<string, never>) {
 super(props);
 this.state = { clickCnt: 0 };
 }

 render(): ReactElement {
 return (
 <div>
 <p>This is a square!</p>
 <p>We have click it for {this.state.clickCnt} time(s)!</p>
 <Square size={100} color="red" />
 </div>
 );
 }
}

`Record` 是什么？

Record<string, never> 可以理解为空对象 {} 的类型标注，这里仅仅是为了通过 TypeScript 的类型检查。

此外，我们还需要编写一个递增计数器的成员函数：

// Component 'App'
increaseCnter(): void {
 this.setState((prev) => ({
 ...prev,
 clickCnt: prev.clickCnt + 1,
 }));
}

现在我们需要思考的就是如何让子组件 Square 调用到这个函数。我们注意到在 TypeScript 语言之中，函数也是一种对象，所以我们完全可以通过组件属性将这个函数传递给子组件。那么我们需要在子组件属性接口上增添一个回调函数：

函数组件

Mon, 01 Jan 0001 00:00:00 +0000

函数组件

我们通过类组件简单介绍了 React 的核心概念，但是类组件有下述比较明显的问题：

编码繁琐，尤其在使用 TypeScript 语言的时候
可能会出现 this 的指向不明确的问题
JavaScript 语言的类语法仅仅是语法糖，并非是完全符合面向对象思路的

所以在新版本的 React 框架中，我们更为推荐大家编写函数组件。

函数组件的基本思维是将整个组件思考为函数，函数的参数为组件的属性，而返回值就是组件的显示方式（即类组件的 render 函数返回值）。也就是说，将组件视作一种接收属性，获取组件渲染指示的数据流管道更为可行。这种思路下开发者可以简单地组合各种管道来实现 Web 应用。

比如说下述没有设置组件状态的、没有使用生命周期方法的正方形组件：

interface SquareProps {
 readonly size: number;
 readonly color: string;
}

class Square extends React.Component<SquareProps> {
 render(): ReactElement {
 return <div
 style={{
 width: this.props.size,
 height: this.props.size,
 backgroundColor: this.props.color
 }}
 />;
 }
}

就可以转写为下述函数组件：

interface SquareProps {
 readonly size: number;
 readonly color: string;
}

const Square = (props: SquareProps): ReactElement => {
 return <div
 style={{
 width: props.size,
 height: props.size,
 backgroundColor: props.color
 }}
 />;
}

这样的转写并不改变组件的本质，使用该组件的方式也和类组件一致。

Hooks 简要介绍

在转写上述类组件的时候，我们注意到如果组件具有状态或者使用了生命周期方法，则无法转写。这里，React 提供的解决方式是使用 Hooks。

管理组件状态

我们首先介绍管理状态需要使用的 Hooks，即 useState 函数。比如说我们依然是将正方形的颜色变为其状态，由组件自身管理，其代码大致为：

interface SquareProps {
 readonly size: number;
 readonly color: string;
}

const Square = (props: SquareProps): ReactElement => {
 const [color, setColor] = useState(props.color);

 const switchColor = () => {
 setColor((prev: string) => prev === "red" ? "blue" : "red");
 };

 return <div
 style={{
 width: props.size,
 height: props.size,
 backgroundColor: color
 }}
 onClick={switchColor}
 />;
}

这里高亮的三行表现出使用 Hooks 的时候需要修改的地方。首先注意第 7 行，这里使用了 useState 函数，该函数接受的是需要设定的状态的初始值，返回的是该状态和用于设定该状态的函数。这里我们设定的状态为 color，初始值为 props.color，而 setColor 和类组件之中的 setState 类似，用于修改状态。

后续拓展

Mon, 01 Jan 0001 00:00:00 +0000

后续拓展

如果你已经学习完了这一篇文档，理解了我们讲述的所有概念，那么你就已经有足够的能力完成《软件工程》课程的大作业 Web 应用前端，乃至开发出一个真正可以上架的 Web 应用了！剩下的，仅仅是多多练习，在编程中理解这些概念，运用这些概念。

不过在真正踏上 Web 前端的道路之前，我们还有一些可以给出的资源链接。

Ant Design

Ant Design 是一个成熟的前端组件库，其作用在于免去调试一整天 CSS 样式表还调不出好看的 Layout 或灵活的交互的苦恼，让我们能更专注于设计前端和用户、后端、数据库的交互逻辑和前端性能。

Ant Design 官方网址：https://ant.design/index-cn。

React 开发入门 on ClearSec Wiki

环境配置

环境配置

前置环境配置

使用 yarn 代替 npm

安装 TypeScript

组件、属性与状态

组件、属性与状态

组件 & render 函数

生命周期

生命周期方法

React 组件的生命周期

非常规数据流

非常规数据流

反向数据流

函数组件

函数组件

Hooks 简要介绍

管理组件状态

后续拓展

后续拓展

Ant Design

使用 `yarn` 代替 `npm`

组件 & `render` 函数