是啥真正让 ReactJS 像它声称的那样快？

Posted 2023-02-22

【中文标题】是啥真正让 ReactJS 像它声称的那样快？

【英文标题】：What really makes ReactJS as fast as it claims to be?是什么真正让 ReactJS 像它声称的那样快？

【发布时间】：2016-01-26 02:32:25

【问题描述】：

我正在学习 ReactJS 并试图了解是什么让它比其他框架和库提供的解决方案“更快”和更特别。

我知道以下几点：

Virtual DOM 以及 React 如何运行差异以采取最少的步骤来确定“更改”并相应地响应/重新渲染，而不是其他框架/库中的传统“脏检查”操作。 通过“Observable”模式以声明方式而非命令方式实现编程。

所以，从概念上讲，上面的陈述对我来说听起来都很好，但是，当我考虑现实生活中的用例和实践时，我无法想象它的好处：

考虑关注jQuery：

$("#box").removeClass('red').addClass('blue');

它比 React 方式做同样的事情“慢”吗？我理解它的方式，jQuery 将直接从 DOM 中获取 1 个具有匹配 id 值“box”的元素，并按照指示删除和添加类——所有特定于 DOM 中的这个元素。 （这里是否实现了“脏检查”来查找#box？）

使用 ReactJS，它会首先在其虚拟 DOM 中进行相同的更改（在执行 diff 以找到 #box 以最少的步骤之后）并将元素重新渲染到实际 DOM。因此，如果有的话，它似乎增加了一个与 VDOM 进行比较的额外步骤。

可观察模式一直存在。为什么它是第一次应用于事件处理操作？.. 做这样的事情：

“嘿，这里发生了一些变化（事件触发）......所以让我们看看我们应该如何处理它（运行与事件绑定的所有内容）并执行它”

任何见解、指针和示例将不胜感激！

【问题讨论】：

jQuery 不是纯 javascript，它在更改 DOM 之前需要通过一堆验证，并且您不知道它选择的更改方法对于该浏览器来说是最快的，或者那种情况。您无法将库与 View 组件进行比较。理想情况下，您应该将 ReactJS 与纯 javascript 进行比较，这似乎是人们认为 jQuery 的东西，但实际上它是一个通用的通用 DOM 库，具有很好的附加功能，如动画。

@GGJ - 我在操作方面进行了更多的比较......当你考虑这样的操作时，ReactJS 是如何真正更快的；特别是我在我的问题中提出的示例——不一定针对 jQuery 本身。我很清楚 jQuery 不是纯 Javascript，它更像是一个包装器，用于标准化不同浏览器产生的不一致......除了动画等其他东西......

好吧，我给你举个例子。通过存储 DOM 的状态，它可以以最有效的方式更改已更改的内容。当您要求 jQuery 做某事时，它会检查所有内容并以最安全的方式进行编码。如果您在一次写入中编写每个类，则将类添加到元素会更快，react 可以这样做，因为它维护了已经存在的类的副本，jQuery 不能，因为它不知道，它必须找出其他类并创建完整的字符串并写回。或者调用classList的较慢的DOM添加类函数部分。

这可能会告诉你为什么知道要进行哪些类更改比调用 classList.add/remove 更快； jsperf.com/setattribute-class-vs-classlist-add 和 jsperf.com/add-class-test

@GGJ - Soo，简而言之，每当我编写一系列语句时，就像添加和删除类一样简单，包括纯 JS 方式在内的大多数传统解决方案都是“脏检查”实际 DOM为每个陈述，并作出相应的回应。另一方面，ReactJS 保留一份 DOM 并以不同的方式有效地处理“检查”部分？

【参考方案1】：

你可能是对的，在这种情况下 jQuery 可能更快（我没有测试过）。但是考虑一下，你为什么要使用 jQuery - 如果你这样做会不会更快

document.getElementById("MyID").className = document.getElementById("MyID").className.replace(/\bred\b/,'');
document.getElementById("MyID").className = document.getElementById("MyID").className + ' blue';

所以说真的，我们并不想在这里竞争原始速度，否则你只会用纯 JavaScript 编写，我知道这样做纯粹是为了在移动设备上更快。

框架的好处是维护和开发速度。使用纯 javascript 编程比 jQuery 更难扩展和维护，同样使用 jQuery 编程比 React 更难扩展和维护。虽然反之亦然，但使用 jQuery 获得具有最少功能的工作应用程序要快得多（但在构建 mvp 后，它变得更难维护）

在小型代码库中，jQuery 可能比 React 更快，但是当您使用较大的代码库时，您会发现 jQuery 中有大量重复和冗余的代码，并且它本来就变得更慢。然而，React 是不同的 - 首先 React 将所有内容分离到组件中，因此它变得更容易重用，其次 React 有一个很酷的内部引擎，可以防止无用的渲染拖慢你的应用程序。

所以是的，你是对的，jQuery 可以比 React 更快，但这确实错过了 React 的重点。就像纯 javascript 可能比 jQuery 更快一样，但这忽略了 jQuery 的意义。

【讨论】：

谢谢@YangLi 这很有道理！

【参考方案2】：

React 并不是特别快，它足够快。 React 的真正价值在于它提供的声明式 API，它可以让您编写更好的代码。

手动 DOM 操作具有更高的潜在性能，但您最终会得到难以维护、难以阅读的代码。这在大型应用程序中是不可接受的，这就是我们求助于 React 等工具的原因。

虚拟 DOM 差异是昂贵的。通常，价格不足以导致您丢帧。更新的 1 毫秒和 16 毫秒之间的差异是没有。重要的是你保持在框架内，这就是为什么 React 的性能开销是可以接受的。