Javascript 是什么让ReactJS像它声称的那样快？

我正在学习

ReactJS

，并试图理解是什么让它比其他框架和库提供的解决方案“更快”和更特殊

我知道以下几点：

virtualdom

和how React运行一个diff，以采取最少的步骤来确定“更改”并相应地响应/重新呈现，而不是其他框架/库中的传统“脏检查”操作

编程更具声明性，而不是通过“可观察”模式强制实现

这样，上面的陈述在概念上听起来都很好，但我在考虑实际生活中的用例和实践时没有看到好处：

考虑使用

jQuery

：

$（“#框”）.removeClass（'red'）.addClass（'blue'）

它怎么会比以反应的方式做同样的事情“慢”呢？按照我的理解，jQuery将直接从DOM中获取1个id值为“box”的元素，并按照指示删除和添加类——所有这些都是DOM中该元素特有的。（是否在此处执行“脏检查”以查找#box？）

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

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

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

---

如有任何见解、建议和示例，将不胜感激

您可能是对的，在这种情况下，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的重点

反应不是特别快，它足够快了。React的真正价值是它提供的声明性api，它可以让您编写更好的代码

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

---

虚拟DOM扩散是昂贵的。通常情况下，价格不足以导致您掉落框架。更新的1ms和16ms之间的差异是零。重要的是您要保持在框架内，这就是React的性能开销可以接受的原因

jQuery不是纯javascript，它在更改DOM之前需要经过一堆验证，而且您不知道它选择的更改方法对于浏览器或这种情况是最快的。不能将库与视图构件进行比较。理想情况下，您应该将ReactJS与纯javascript进行比较，人们似乎认为jQuery是纯javascript，但实际上它是一个通用的DOM库，具有很好的附加功能，如动画。@GGJ-我在操作方面比较了更多。。当你想到这些操作时，ReactJS的速度有多快；特别是我在问题中提到的例子——不一定是针对jQuery本身的。我很清楚jQuery不是一个纯粹的Javascript，它更像是一个包装器，可以标准化不同浏览器产生的不一致性。除了动画等其他东西。好的，我给你举个例子。通过存储DOM的状态，它可以以最有效的方式更改已更改的内容。当您要求jQuery执行某些操作时，它会检查所有内容，并编写代码以最安全的方式执行某些操作。如果在一次写入中写入每个类，则将类添加到元素会更快，react可以做到这一点，因为它维护已经存在的类的副本，而jQuery不能，因为它不知道，它必须找到其他类，并创建完整的字符串并进行回写。或者调用类列表中较慢的DOM添加类函数部分。这可能会告诉您为什么知道要进行哪些类更改比调用classList.add/remove要快；和@GGJ-Soo，简而言之，每次我编写一系列语句时，就像添加和删除类一样简单，大多数传统的解决方案，包括纯JS方式，都是对每个语句的实际DOM进行“脏检查”，并做出相应的响应。另一方面，ReactJS保留DOM的副本，并以不同的方式高效地处理“检查”部分？谢谢@YangLi，这很有意义！