如何判断React是否最适合您的下一个项目

React 核心概念速览

• React 是什么？ React 是一个用于构建快速、交互式用户界面的流行且强大的 JavaScript 库，它采用声明式、组件化方法，高效地更新和渲染数据变化后的组件。
• 虚拟 DOM 的作用： React 的核心是虚拟 DOM，它是一个轻量级的 DOM 抽象模型。React 利用虚拟 DOM 更新网页，避免直接操作 DOM，从而提升性能。虚拟 DOM 通过比较前后差异，只更新实际改变的部分。
• React 的适用场景： React 非常适合需要快速响应事件和频繁数据变化的项目，尤其适用于需要与底层数据模型保持同步的复杂交互式 UI。它也有助于管理状态组件并防止代码混乱，因此非常适合需要大量状态管理和 DOM 操作的项目。

现代用户期望 Web 应用拥有流畅的性能，体验如同原生应用。虽然已经有很多技术来减少网站首次加载时间，但在交互性强的 Web 应用中，用户操作与应用响应之间的时间延迟同样至关重要。原生应用反应迅速，Web 应用也应该如此，即使在网络连接不佳的情况下。

许多现代 JavaScript 框架有效地解决了这个问题。React 可被认为是创建快速、交互式 Web 应用用户界面的最流行和最强大的 JavaScript 库之一。

本文将探讨 React 的优势和工作机制，帮助您判断它是否适合您的下一个项目。

什么是 React？

React 是 Facebook 创建的一个 JavaScript 库，用于构建用户界面。

这是一个开源项目，在 GitHub 上拥有超过 74,000 个星标。

React 的特点：

• 声明式： 只需为应用程序的每个状态设计简单的视图，React 会在数据更改时高效地更新和渲染正确的组件。
• 组件化： 通过组装多个封装的组件来创建 React 应用，每个组件管理自己的状态。
• 一次学习，随处编写： React 不是一个完整的框架，它只是一个用于渲染视图的库。

虚拟 DOM 如何工作？

虚拟 DOM 是 React 快速渲染用户界面元素及其更改的核心。让我们更深入地了解其机制。

HTML 文档对象模型 (DOM) 是：

HTML 和 XML 文档的编程接口……DOM 提供了文档的表示，作为一个结构化的节点和对象组，具有属性和方法。它本质上将网页连接到脚本或编程语言。——MDN

每当您想以编程方式更改网页的任何部分时，都需要修改 DOM。根据文档的复杂性和大小，遍历 DOM 并更新它可能需要比用户所能接受的时间更长，尤其是在考虑浏览器在 DOM 发生更改时需要执行的工作时。事实上，每次 DOM 更新时，浏览器都需要重新计算 CSS 并对网页执行布局和重绘操作。

React 使开发人员无需直接处理 DOM 即可更改网页。这是通过虚拟 DOM 实现的。

虚拟 DOM 是 DOM 的轻量级抽象模型。React 使用 render 方法从 React 组件创建节点树，并根据操作导致的数据模型更改更新此树。

每次 React 应用中的底层数据发生更改时，React 都会创建一个新的虚拟 DOM 表示来表示用户界面。

使用虚拟 DOM 更新 UI 更改

在更新浏览器的 DOM 时，React 大致遵循以下步骤：

1. 每当发生更改时，React 都会在虚拟 DOM 表示中重新渲染整个 UI。
2. 然后，React 计算先前虚拟 DOM 表示与新表示之间的差异。
3. 最后，React 使用实际更改的内容来修补真实的 DOM。如果没有任何更改，React 完全不会处理 HTML DOM。

人们可能会认为，这种涉及在内存中保留虚拟 DOM 的两个表示并进行比较的过程，可能比直接处理实际 DOM 更慢。高效的 diff 算法、批量 DOM 读/写操作以及将 DOM 更改限制在必要的最小限度，使得使用 React 及其虚拟 DOM 成为构建高性能应用程序的绝佳选择。

React 是否适合所有项目？

顾名思义，React 擅长创建超高响应性的用户界面——即非常快速地响应事件和随之而来的数据更改的用户界面。Facebook 工程师 Jordan Walke 对 React 名称的评论很有启发性：

此 API 对任何状态或属性更改做出反应，并可处理任何形式的数据（结构深度如同图形本身），因此我认为这个名称很贴切。——Vjeux，“我们的前 50,000 个星标”

虽然有些人认为所有项目都需要 React，但我认为可以说，对于需要将复杂的交互式 UI 与底层数据模型的频繁更改保持同步的 Web 应用，React 是一个不错的选择。

React 旨在以高效的方式处理有状态组件（这并不意味着开发人员不需要优化他们的代码）。因此，可以将受益于此功能的项目视为 React 的理想候选项目。

Chris Coyier 概述了以下相互关联的情况，在这些情况下使用 React 是有意义的，我倾向于同意：

• 大量的状态管理和 DOM 操作。也就是说，启用和禁用按钮、激活链接、更改输入值、关闭和展开菜单等。在这种项目中，React 使管理有状态组件更快更容易。正如 React Router 的共同作者 Michael Jackson 在一条推文中恰当地所说：>关键是，React 负责弄清楚实际上需要对 DOM 进行哪些更改的难题，而不是我。这是*非常宝贵的*
• 避免代码混乱。通过直接修改 DOM 来跟踪复杂的状态可能会导致代码混乱，至少如果不特别注意代码组织和结构的话。

资源

如果您好奇 React 及其虚拟 DOM 的工作原理，以下是一些您可以了解更多信息的资源：

• 使用 SitePoint 的综合 React 中心学习 React。
• 来自 Facebook 工程师的 React 视频
• Chris Minnick 的“React.js 中虚拟 DOM 的真正好处”
• Bartosz Krajka 的“虚拟 DOM 与 DOM 之间的区别”
• François Zaninotto 的“React 速度慢，React 速度快：在实践中优化 React 应用”
• Chris Lienert 的“如何为您的公司选择合适的前端框架”

结论

React 和其他类似的 JavaScript 库简化了快速、事件驱动的用户界面的开发，这些界面可以快速响应状态更改。可以识别出一个潜在的目标，即希望弥合 Web 应用和原生应用之间的差距：用户期望 Web 应用像原生应用一样流畅无缝。

这是现代 Web 开发的发展方向。Create React App（一个无需配置即可创建 React 应用的项目）的最新更新默认包含创建渐进式 Web 应用 (PWA) 的功能，这并非偶然。这些应用利用服务工作者和离线优先缓存来最大限度地减少延迟并使 Web 应用能够离线工作。

关于 React 虚拟 DOM 的常见问题

• 什么是 React 中的虚拟 DOM？ 虚拟 DOM (VDOM) 是一种编程概念，其中 UI 的理想或“虚拟”表示保存在内存中，并由诸如 ReactDOM 之类的库与“真实”DOM 同步。此过程称为协调。在 React 中，当您渲染 JSX 元素时，每个虚拟 DOM 对象都会被更新。

• 虚拟 DOM 如何工作？ 虚拟 DOM 分三个简单的步骤工作。首先，每当任何底层数据发生更改时，整个 UI 都会在虚拟 DOM 表示中重新渲染。然后，计算先前 DOM 表示与新表示之间的差异。最后，真实的 DOM 只会更新实际更改的内容。这比每次更改都更新整个 DOM 更有效，并提高了性能。

• React 的虚拟 DOM 如何提高性能？ React 的虚拟 DOM 通过最大限度地减少直接操作 DOM 的次数来提高性能，而直接操作 DOM 在任何浏览器中都是一项缓慢的操作。 React 不是每次发生更改时都更新整个 DOM，而是只更新需要更新的 DOM 部分。这导致性能显着提升。

• 真实 DOM 与虚拟 DOM 之间的区别是什么？ 真实 DOM 是浏览器中网页的实际表示，而虚拟 DOM 是内存中网页的虚拟表示。虚拟 DOM 更快、更高效，因为它只更新已更改的真实 DOM 部分，而不是每次发生更改时都更新整个 DOM。

• React 中的 JSX 是什么？ JSX 代表 JavaScript XML。它是 JavaScript 的语法扩展，由 Facebook 开发，允许在 JavaScript 中存在类似 HTML/XML 的文本。您可以在包含 JavaScript 代码的同一文件中编写 HTML 结构。

• React 如何使用 JSX？ React 使用 JSX 在 DOM 上渲染元素。 JSX 允许我们在 JavaScript 中编写 HTML 元素并将它们放在 DOM 中，而无需任何 createElement() 和/或 appendChild() 方法。 JSX 将 HTML 标记转换为 React 元素，并使在 React 中编写和添加 HTML 更加容易。

• React 中的协调是什么？ 协调是 React 更新 DOM 的过程。当组件的状态发生变化时，React 需要确定是否需要实际的 DOM 更新。它通过创建一个新的虚拟 DOM 并将其与旧的虚拟 DOM 进行比较来实现此目的。只有在存在差异的地方，React 才会更新真实的 DOM。

• React 如何处理事件？ React 创建了自己的事件系统，它与 W3C 对象模型完全兼容。 React 实现了一个合成事件系统，为 React 应用程序和界面带来一致性和高性能。它通过将事件委派给文档的根元素，然后将它们映射回相应的组件元素来实现这一点。

• 组件在 React 中的作用是什么？ 组件是任何 React 应用程序的构建块，单个应用程序通常由多个组件组成。组件本质上是用户界面的一部分。它将 UI 分割成独立的、可重用的部分，这些部分可以单独处理。

• React 如何处理表单？ 在 HTML 中，表单元素（如 、 和 ）通常维护自己的状态，并根据用户输入更新它。在 React 中，可变状态通常保存在组件的 state 属性中，并且只使用 setState() 进行更新。 React 的表单处理方式略有不同，但允许对表单及其数据进行更精细的控制。

以上是如何判断React是否最适合您的下一个项目的详细内容。更多信息请关注PHP中文网其他相关文章！