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

如今，用户期望时尚、高性能的 Web 应用程序的行为越来越像本机应用程序。人们已经设计了一些技术来减少用户首次访问时网站加载的等待时间。然而，在公开大量交互性的 Web 应用程序中，用户操作发生和应用程序响应之间经过的时间也很重要。本机应用程序感觉很敏捷，而网络应用程序也应该表现得相同，即使在不太理想的互联网连接上也是如此。许多现代 JavaScript 框架如雨后春笋般涌现，可以非常有效地解决这个问题。React可以安全地被视为最流行、最强大的 JavaScript 库之一，您可以使用它为 Web 应用程序创建快速、交互式的用户界面。 在这篇文章中，我将讨论 React 的优点以及它的工作原理，这应该为您提供一些背景信息，帮助您决定这个库是否适合您的下一个项目。 什么是反应？ React 是 Facebook 的一个创造，它简单地将自己标记为用于构建用户界面的 JavaScript 库。




这是一个开源项目，迄今为止，已在 GitHub 上获得了超过 74,000 颗星。 反应是： 声明式：您只需要为应用程序中的每个状态设计简单的视图，当您的数据发生变化时，React 将有效地更新和渲染正确的组件。 基于组件：您可以通过组装许多 WhatsApp 号码数据 封装的组件来创建由 React 驱动的应用程序，每个组件都管理自己的状态。 一次学习，随处编写：React 不是一个成熟的框架；它只是一个用于渲染视图的库。 虚拟 DOM 如何工作？ Virtual DOM是 React 快速渲染用户界面元素及其变化的核心。让我们仔细看看它的机制。 HTML 文档对象模型或 DOM 是 HTML 和 XML 文档的编程接口。... DOM 将文档表示为具有属性和方法的节点和对象的结构化组。本质上，它将网页连接到脚本或编程语言。——MDN _ 每当您想要以编程方式更改网页的任何部分时，您都需要修改 DOM。根据文档的复杂性和大小，遍历 DOM 并更新它可能需要比用户准备接受的时间更长的时间，特别是如果您考虑到 DOM 中的某些内容发生更改时浏览器需要执行的工作。



事实上，每次DOM更新时，浏览器都需要重新计算CSS并对网页进行布局和重绘操作。 React 使开发人员能够对网页进行更改，而无需直接处理 DOM。这是通过虚拟 DOM完成的。 Virtual DOM 是 DOM 的轻量级抽象模型。React 使用该render方法从 React 组件创建节点树，并更新该树以响应操作导致的数据模型的更改。 每次 React 应用程序中的底层数据发生更改时，React 都会创建用户界面的新虚拟 DOM 表示。 使用虚拟 DOM 更新 UI 更改 当涉及到更新浏览器的 DOM 时，React 大致遵循以下步骤： 每当发生变化时，React 都会以虚拟 DOM 表示形式重新渲染整个 UI。 然后 React 计算之前的 Virtual DOM 表示和新的之间的差异。 最后，React 用实际改变的内容来修补真实的 DOM。如果没有任何变化，React 将根本不会处理 HTML DOM。 人们可能会认为，这样一个过程（涉及在内存中保存虚拟 DOM 的两种表示并比较它们）可能比直接处理实际 DOM 慢。