React 基础与实践【讲师：杨雨涵】
01 React简介与特性
React的特点：
React是一个用于构建用户界面的JavaScript框架，具有以下特点：
- 声明式设计：React采用声明范式，可以轻松描述应用。
- 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 灵活：React可以与已知的库或框架很好地配合。
- 可复用组件：React提供了组件化思想，可以把页面划分为多个独立的组件，可复用性高，方便维护和开发。
- 单向数据流：React中数据流动是单向的，父组件向子组件传递数据，子组件只能通过props接收父组件传递的数据，保证了数据的可控性和稳定性。
- 虚拟DOM：React通过虚拟DOM的机制，将组件中的数据和真实的DOM进行比较，只更新差异部分，从而提高页面的性能。
- 生态丰富：React拥有丰富的生态圈，例如React-Router、Redux等，方便开发者构建完整的Web应用。
React的更新流程： 在 React 中，组件的更新流程主要分为两个阶段：Reconciliation（协调）和Commit（提交）。
- Reconciliation
当一个组件的 state 或 props 发生变化时，React 会启动 Reconciliation 过程，计算出组件的新的 Virtual DOM 树。Reconciliation 的过程分为以下几个阶段：
- Diff：比较新旧 Virtual DOM 树，找到需要更新的节点。
- Reorder：对新旧 Virtual DOM 树进行重新排序，以优化 DOM 更新的性能。
- Keyed：针对列表类型的元素，React 根据每个元素的 key 值来对比新旧 Virtual DOM 树，提高更新效率。
在 Reconciliation 过程中，React 并不会立即更新 DOM，而是将更新操作加入到更新队列中。
- Commit
在 Reconciliation 过程中，如果某个组件发生了状态变化，那么在下一次 commit 阶段，React 就会将更新操作应用到真正的 DOM 上。Commit 阶段具有如下特点：
- 批量修改：React 采用批量修改的方式，将多个更新操作合并为一次 DOM 修改，从而提高页面性能。
- 异步更新：React 采用异步更新的方式，能够有效减少 DOM 操作次数，从而提高应用的性能。
- 生命周期：在 commit 阶段，React 会调用组件的生命周期函数，例如 componentDidUpdate 等。
需要注意的是，在执行 commit 阶段时，React 会对整个组件树进行遍历，从根节点开始递归执行。因此，建议在组件中尽量减少 DOM 操作，从而降低页面的更新成本。
02 React基础温故知新
React 是一个用于构建用户界面的 JavaScript 库，以下是 React 的基础知识：
- 组件
在 React 中，所有可见的元素都是由组件构成。组件是独立、可复用的代码单元，可以将组件与其他组件组合在一起以构建复杂的 UI。
- JSX
JSX 是一种 JavaScript 语法扩展，可以让我们在 JavaScript 中编写类 XML 代码，使得代码更易读、更易懂。在构建 React 应用时，我们多数情况下都会使用 JSX 来描述 UI。
- Props
Props 是组件之间传递数据的方式。每个组件都可以接收其他组件传递过来的 props，并根据 props 的不同渲染出不同的 UI。
- State
State 是组件内部维护的状态，当 state 发生变化时，React 会自动更新 UI。通常来说，我们会在组件的构造函数中初始化 state，并通过调用 setState 方法来修改 state。
- 生命周期
组件的生命周期包括：挂载阶段、更新阶段和卸载阶段。在不同的生命周期阶段，React 会调用对应的生命周期方法，在这些方法中，我们可以执行一些额外的操作。
- Hooks
Hooks 是 React 16.8 引入的新特性，它可以让我们在不编写 class 组件的情况下，使用状态和其他 React 特性。使用 Hooks 可以使代码更加简洁、易读和易于维护。
- Virtual DOM
Virtual DOM 是 React 的核心机制之一，它是一个轻量级的 JavaScript 对象，模拟了真实 DOM 的属性和状态。在组件状态变化时，React 会先将新的 Virtual DOM 与旧的 Virtual DOM 进行比较，然后只更新有变化的部分，从而减少了对真实 DOM 的操作，提高了应用的性能。
