了解 React 的工作原理-js教程-PHP中文网

Understanding How React Works

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

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

- 乔纳斯·施梅特曼

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

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

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

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

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

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

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

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

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

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

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

渲染阶段涉及几个步骤：

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

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

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

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

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

什么是纤维？

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

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

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

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

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

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

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

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

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

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

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

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

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