2

我已经阅读了 10 篇关于 React 和 Virtual DOM 的文章。

我了解虚拟 DOM 使用差异算法并且仅更新已更改的 UI。但我仍然不明白为什么这比更新实际 DOM 更快。

下面是一个例子：

<div id="test">
    Hello React!
</div>

假设我们创建了一个组件并使用 React 对其进行了更改。假设我们将文本更改为Hello World!

我可以用普通的 JS 做同样的事情吗？document.getElementById('test').innerHTML = Hello World!

我的问题：

为什么反应更快？我觉得 React 在幕后做着完全相同的事情，对吧？

我觉得我在这里缺少一些基本的东西。

4

6 回答 6

2

实际上 Virtual Dom 并不比实际 Dom 快，真实 DOM 本身速度很快，它可以快速从 DOM 树中搜索、删除和修改元素。但是 html 树中的布局和绘画元素很慢。但是 React 虚拟 DOM 并不快。Virtual DOM 的真正好处是它允许计算每次更改之间的差异并对 HTML 文档进行最小的更改。

现在为什么在操作 DOM 时 react 更好？，你的浏览器做了很多工作来更新 DOM。更改 DOM 可以触发重排和重绘；当一件事发生变化时，浏览器必须重新计算页面流中其他元素的位置，并且还必须重新绘制工作。

浏览器有自己的内部优化来减少 DOM 更改的影响（例如在 GPU 上进行重绘，在自己的图层上隔离一些重绘等），但从广义上讲，更改一些内容可能会触发昂贵的重排和重绘。

即使从头开始编写所有内容以从 DOM 构建 UI，然后一次性将其全部插入（例如 document.createElement 一个 div 并在其下插入一整棵树以附加到主 DOM），这也是很常见的，但 React 旨在观察变化并智能更新 DOM 的小部分，以最大程度地减少重排和重绘的影响

于 2018-03-22T22:31:42.237 回答
2

在您的情况下，普通的 js 函数肯定会更快。React 非常适合非常复杂的 UI。您的 UI 越复杂，您要么需要编写大量代码来更新它，要么您只需在每次重新渲染时重建整个 UI。然而，这些 DOM 更新非常缓慢。React 允许您完全重新渲染数据，但实际上不会重新渲染整个 DOM，而只是更新其中的某些部分。

于 2018-03-22T22:28:01.660 回答
1

有几个原因让我不由自主地想到：

  • React 使用一个虚拟 DOM，它只是 JS 对象，来表示 DOM。虚拟 DOM 的“当前”版本是引用实际 DOM 元素的对象，而“下一个”vDOM 只是对象。对象的操作速度非常快，因为它们只是内存更改，而真正的 DOM 更改需要昂贵的样式布局、绘制和光栅化步骤。
  • 将当前vDOMdiff与下一个 vDOM 进行反应，以产生使真实 DOM 反映下一个 vDOM 所需的最少更改数量。这叫做和解。对 DOM 所做的更改越少，布局计算的速度就越快。
  • React 将 DOM 更改一起批处理，以便尽可能少地接触真实 DOM。它还使用requestAnimationFrame任何地方来确保真正的 DOM 更改与浏览器的布局计算周期“很好地”配合。
  • 最后（可能是 React 最不受欢迎的特性），React 具有越来越复杂的调度步骤来区分低优先级和高优先级更新。低优先级更新是可以承受更长时间的 UI 更新，例如从服务器获取的数据，而高优先级更新是用户会立即注意到的内容，例如用户输入字段。低优先级更新使用非常新的requestIdleCalbackAPI来确保它们在浏览器的主线程实际空闲时运行，并且它们经常返回到主线程以避免锁定 UI。
于 2018-03-23T04:22:52.760 回答
0

为什么这比更新实际 DOM 更快。

它并不快。显式和可控的 DOM 更新比其他任何东西都快。

React可能会在类似于 facebook 的网站上安排更好的更新图表，但会产生差异处理的成本O(D*N)。在其他网站上，React 可能只是浪费 CPU 资源。

这里没有灵丹妙药 - 每个框架都最适合最初创建的站点。对于其他人来说，如果特定框架至少是次优的，你会很幸运。

真实而复杂的 Web App UI 不使用任何“框架”，而是使用它们自己的原语：GMail、Google Docs 等。

于 2018-03-22T22:37:44.753 回答
0

您可以按照您的描述使用vanilla-js ：

document.getElementById('test').innerHTML = Hello World!

这很棒，但对于中型\大型项目来说非常困难。

为什么？因为 react 处理你所有的 dom 交互并最小化它（尽可能多），当你使用 vanilla-js 时，你的大部分代码将只是对 dom 进行操作，提取数据和插入数据，通过 react 你可以解决这些问题把你所有的努力放在一边，创造最好的网站\项目。

此外，虚拟 dom 使所有计算都变得有意义，当您尝试手动执行时，您必须每次都处理所有计算（当您更新列表和更新另一个列表时），很可能来自一些点你的大部分代码将计算关于 dom 更新听起来很熟悉？好吧，就为了那个你已经有反应了。

不要重复自己

如果有人已经这样做了，请重复使用它。

关注点分离

项目的一部分应该操纵用户界面，另一部分应该操纵逻辑

并且列表可以继续下去，但总而言之，最重要的是，vanilla-js 更快，最终使用虚拟 dom，如果没有它，您最终将不得不使用 vanilla-js。让你的生活更简单，让你的代码可读。

于 2018-03-22T22:43:40.353 回答
-1

React 并不比 PURE Javascript 快。它们之间的最大区别是：

纯 Javascript：如果你能掌握 Javascript 语言并有时间花时间寻找最佳解决方案（对浏览器性能的影响最小），那么你肯定会得到一个比 React 更强大的 UI 渲染系统（因为你已经创建了一个特定的引擎，面向你的需要）

React：如果你想花更多的时间在数据结构上而不用担心 UI 更新性能 React（或者 Vue.js 未来的 UI 开发候选者）是最好的选择

于 2018-03-22T22:33:44.273 回答