React

我们将开始讨论应用程序的 视图 层。本课程简要介绍了 React，以及它的核心概念和基本构建模块。

我们将在本课程中从讨论应用程序的 视图 层开始。本课程简要介绍了 React、其核心概念和基本构建模块。React 官方文档指出：“React 是一个声明式、高效且灵活的 JavaScript 库，用于构建用户界面。它允许你通过称为 组件 的小型、独立代码块来组合复杂的 UI。” 这一定义在本课程结束时会更加清晰，但目前我们只需了解：React 是一个库，而不是一个 框架。

由于 React 是一个 库，我们可以自由选择使用任何工具！例如，我们可以使用 Axios 或原生的 Fetch API 来发起 HTTP 请求。我们也可以选择使用 Formik、Hook Form，或者直接用原生 JavaScript 处理表单。这种全面的选择使 React 保持无立场（un-opinionated），赋予我们根据自身需求决定项目构建方式的灵活性。然而，当我们缺乏足够经验时，应谨慎对待那些不常用的方法，优先采用社区广泛使用的主流方案。

为什么选择 React？

React 是构建 Web UI 的知名 JavaScript 库。以下是几个说明为何 React 是开发应用 UI 的绝佳选择的原因：

• 易用性：使用 React 构建静态和动态网页应用非常容易，因为它功能丰富，所需编码量少。

• 性能：React 使用虚拟 DOM 的概念来判断如何渲染 UI，从而显著提升应用速度。

• 组件化：React 基于可复用组件的设计理念，极大缩短了开发时间。

• 单向数据流：数据仅从父组件传递给子组件，这使得开发者更容易排查潜在错误。

• 学习曲线平缓：React 官方文档 指出，只需掌握 HTML 和 JavaScript 的基础概念即可开始学习 React。

• 活跃的社区：React 由 Facebook 维护，并拥有庞大的开源社区持续贡献和改进该库。

React 的核心构建模块

以下是本课程中需要重点关注的一些主要 React 构建模块：

JSX

React 中的一切都是 JavaScript！JSX 是 JavaScript 语法的一种扩展，用于在 JavaScript 代码中描述 UI 的外观，使我们可以在同一文件中编写 HTML。来看下面的例子：

上述代码既不是纯 JavaScript，也不是纯 HTML，而是使用了 JSX。HTML 被嵌入到 JavaScript 文件中，具有相同的代码作用域。同时注意，我们是如何在 HTML 中通过花括号调用 getCollegeAddress(college) 函数的。

组件

组件 是 React 最关键的构建模块。我们可以将组件理解为一个函数，它接收一些数据，并根据这些数据决定 UI 如何呈现。

组件的设计遵循单一职责原则。在 React 中，有两种声明组件的方式：基于类的方式 或 基于函数的方式。

基于函数的组件

基于函数的组件 以前被称为 无状态组件，因为它们没有状态。但随着 React Hooks 的引入，函数式组件已具备与类组件相当的能力。

React 团队并未打算放弃类组件的使用，但他们更推荐频繁使用函数式组件，因为它们与 JavaScript 的兼容性更好。

如上例所示，我们甚至可以使用箭头函数来定义组件，这避免了处理 JavaScript 中一些复杂的问题，比如 this 关键字及其绑定问题。在本课程中，我们将使用 Hooks。

基于类的组件

基于类的组件是 React 中传统的组件使用方式。这类组件曾被称为有状态组件 —— 即具有状态并能访问 this 关键字。但现在，类组件的功能已与函数式组件基本一致。

虚拟 DOM

操作和更新真实 DOM 是一项开销较大的操作，通常需要重新绘制整个 UI。因此，React 在内存中维护一个轻量级的 DOM 副本，称为 虚拟 DOM，只对发生变化的部分进行更新，而非整个 DOM。

当状态发生变化时，虚拟 DOM 会被更新。随后，React 会将虚拟 DOM 与真实 DOM 进行对比，确定需要更新的组件或元素。这一机制使 React 相较于那些更新整个 DOM 的框架具有明显优势。

状态与属性

React 采用单向数据绑定机制，引入了状态（state）和属性（props）来管理应用数据。

状态（State）

我们可以将 状态 理解为应用运行过程中经常变化的变量。状态是私有的，由组件自身控制。状态的变化会触发 UI 的重新渲染。

更新状态时需格外小心。如果像下面这样直接修改状态，将不会触发重新渲染，也无法感知新值：

1// 错误方式
2this.state.name = "Ahmed";

正确的做法是使用 setState 回调函数：

1// 正确方式
2this.setState({name: "Ahmed"});
3
4// 或者使用 Hooks
5const [name, setName] = useState("");
6setName("Ahmed");

最后，需要注意的是，React 会合并状态更新：

1const [state, setState] = useState({name: "", company: ""});
2
3setState(prev => ({...prev, name: "Ahmed"}));
4setState(prev => ({...prev, company: "Educative"}));
5
6/*
7这将合并为一次更新：
8state = {
9   name: "Ahmed",
10   company: "Educative"
11}
12*/

属性（Props）

状态是 React 管理组件数据的方式，那组件的子组件呢？Props 是向子组件传递数据的方式。Props 类似于 HTML 中的自定义 data- 属性。需要注意的是，Props 是 只读的，因此不能在子组件中修改它们。

我们将使用 npm start 命令运行以下示例应用：

在上述代码中，我们将 count 值作为 props 传给了 Counter 组件。因此，每次 count 增加时，都会被传递并在屏幕上显示。