了解 React 的工作原理

什么是反应？ ⚛️

React 是一个 JavaScript 库，它可以帮助我们更快、更高效地构建 Web 应用程序。它可以使用单页应用程序（SPA）模型更好地处理数据和工作。虽然这是一个简洁的定义，但我发现另一个更全面的定义：

“React 是一个非常流行的 JavaScript 库，它使用组件和状态来构建用户界面 (UI)。它由 Facebook 开发。”

- 乔纳斯·施梅特曼

注意：从这里开始，我假设您对 React 有一定的了解或者以前使用过它。

---

React 是如何工作的？

React 完全基于组件 的概念。组件是 UI 中可以重用的较小部分。现在，让我们来看看代码如何变成您在屏幕上看到的 UI 的过程。

组件 → 组件实例 → React 元素 → DOM 元素 → 屏幕上的 UI

现在您已经了解了组件是什么，让我们深入了解组件实例，它们是组件的实际工作版本。本质上，组件就像蓝图或模板。当我们创建组件实例时，我们传递 props 并为其分配特定的状态。这些实例是我们在 React 中使用的。

如果你想更深入地了解这个概念，我建议在 Medium 上搜索 “React 组件、实例和元素”。

现在，我的目标是解释接下来发生的过程：

React 元素 → DOM 元素 → 屏幕上的 UI

这个过程分为四个阶段，我们将一一探讨：

1. 渲染已触发
2. 渲染阶段
3. 提交阶段
4. 浏览器画图

---

1. 渲染被触发

渲染可以在两种情况下触发：

• 初始渲染：首次加载应用程序时会发生这种情况。
• 状态更新（重新渲染）：当应用程序发生更改时（通常是状态更改时），会发生这种情况。

此阶段没有发生太多事情，所以让我们继续下一阶段。

---

2. 渲染阶段

现在，让我们重新定义“渲染”的含义。作为前端开发人员，我们经常使用术语 render 来描述 UI 中的更改。但这并不完全准确。 React 中的渲染意味着为下一阶段准备 UI。

渲染阶段涉及几个步骤：

步骤1：触发重新渲染的组件实例

这是 React 检测到组件中发生更改的时候。

第 2 步：反应元素

此步骤涉及收集项目中的所有组件并构建所谓的虚拟 DOM 树。该树将组件之间的关系概述为节点，其中每个父组件都有其子组件。

这里有一点很重要：当父组件发生变化时，它的所有子组件也会重新渲染。

---

在这个阶段，几件事情同时发生：

• 首先，React 创建虚拟 DOM 树。
• 接下来，协调器介入。它负责识别发生了什么变化。在 React 中，协调器称为 Fiber.

如果您想详细探索 Fiber，您可以查看：

• Medium 上的“什么是 React Fiber 以及它如何帮助您构建高性能 React 应用程序”。
• Dhiwise 上的“使用 React Fiber 构建高性能应用程序”。

什么是纤维？

Fiber 是负责协调组件变化的引擎。它告诉我们什么改变了，什么被删除了，什么被添加了。这是一个简化的解释，但 Fiber 涉及几个关键概念：

• 协调：标识更改（添加、更新或删除 DOM 元素）。
• Diffing：一种高度优化的算法，用于将当前 DOM 与虚拟 DOM 进行比较。它基于两个规则运行：
  1. 如果 DOM 元素的类型发生变化。
  2. 如果属性或道具发生变化。

此算法将运算速度从 O(n³) 加速到 O(n)，从而提高了应用程序性能。

• 纤维树：此树是在初始渲染期间创建的。它镜像虚拟 DOM 树，但有所不同。它提供了以下方面的见解：
  • 当前状态
  • 道具
  • 副作用
  • 用过的挂钩
  • 工作队列

渲染阶段是异步的，这意味着它可以根据需要暂停、恢复、取消或确定优先级。这允许 React 在应用程序运行时不断更新 Fiber Tree。

此阶段的最终结果是效果列表，它将传递到下一阶段。

---

3. 提交阶段

在此阶段，React 获取在渲染阶段生成的 效果列表 并将这些更改应用到 DOM。这是由另一个库 ReactDOM 处理的。 ReactDOM 负责根据 React 识别的更改来操作实际 DOM。

重要注意事项：React 负责创建 UI 结构，而 ReactDOM 则处理特定于浏览器的操作。这意味着对于不同的平台（例如 React Native），不同的库（例如 React Native 管理 UI 的渲染方式。

提交阶段必须同步，因为我们无法部分渲染我们的界面。更改需要立即应用。

---

4. 浏览器画图

这最后一步超出了 React 的范围。它涉及浏览器的渲染引擎将更改绘制到屏幕上。每个浏览器对此的处理方式不同，值得研究特定于浏览器的渲染过程。

如果您对浏览器的工作原理感兴趣，请查看：

• MDN 上的“填充页面：浏览器如何工作”。
• web.dev 上的“渲染树构建、布局和绘制”。
• Medium 上的“浏览器渲染剖析：网页如何变得栩栩如生”。
• Medium 上的“什么是 DOM 以及 HTML 渲染如何在浏览器中发生”。

---

进一步阅读：

如果您有兴趣深入了解，这里有一些有用的资源：

• GitHub 上的“react-fibre-architecture (acdlite)”。
• React.dev 上的“渲染并提交”。
• 2024 年终极 React 课程：React、Next.js、Redux 等 作者：Jonas Schmedtmann。

---

以上是了解 React 的工作原理的详细内容。更多信息请关注PHP中文网其他相关文章！