React中的虚拟DOM

今天我们将学习 React 中的虚拟 DOM，它负责 React 的快速性能和声明式特性。

什么是DOM？

DOM 代表文档对象模型，它表示页面上所有 UI 元素的节点树。如果 UI 上的任何元素发生更改，DOM 都会随之更新。

频繁更新 DOM 的过程会导致网页加载缓慢，因此需要虚拟 DOM。我们知道 DOM 代表树状结构，所以更改和更新速度很快，但重新渲染部分需要很长时间才能完成。

如果你了解关键渲染路径，就会知道它的最后一步（即绘制）耗时最长，这就是为什么浏览器会进行优化，以最短的时间重新绘制。

来源：https://guillermo.at/browser-critical-render-path

什么是虚拟DOM？

虚拟 DOM 代表实际 DOM 的一个副本。React 维护着 DOM 的一个副本，并根据这个 DOM 渲染 UI。

React 基于可观察模式（observable pattern）的概念。它监听实际 DOM 中的所有变化，并仅用这些变化更新虚拟 DOM。然后，React 仅根据虚拟 DOM 的变化渲染 UI 。这个过程称为差异比较（diffing）。

保持实际 DOM 和虚拟 DOM 同步的过程称为协调。

虚拟 DOM 的速度优势体现在哪里？

一旦实际 DOM 中发生任何更新，协调算法就会将该元素标记为“脏”，并继续处理下一个更新。当 DOM 中的所有更新都处理完毕后，它们会分批传递给虚拟 DOM，而不是像实际 DOM 那样逐个传递。这使得虚拟 DOM 的速度更快，从而提升了 React 的性能。

关键点——一种重新渲染的解决方案

实际 DOM 和虚拟 DOM 中 UI 元素的引用不必相同。因此，在这种情况下，即使我们只修改了一行代码，React 也会重新渲染所有内容。

假设我们有这样一段代码。DOM 会像第一次一样将其完全渲染。

<div>
  <p>Hello! I am a piece of text.</p>
  <p>Don't underestimate me!</p>
</div>

现在，如果我们再添加一个段落，DOM 也会重新渲染所有未更改的段落。

<div>
  <p>Hello! I am a piece of text.</p>
  <p>Don't underestimate me!</p>
  <p>You don't know my powers!</p>
</div>

现在你可能会想，为什么 React 没有按预期运行。

正如我之前所说，这里的引用不必相同。实际 DOM 和虚拟 DOM 中的前两个段落对于 React 来说是不同的，React 将它们视为 DOM 中的新元素。这导致了不必要的 DOM 重新渲染。这个问题可以通过以下方法解决keys：

<div>
  <p key="1">Hello! I am a piece of text.</p>
  <p key="2">Don't underestimate me!</p>
</div>

在渲染列表时，我们通常会给keys元素赋予属性值，而对于许多开发者来说，决定该属性值是什么是一件令人头疼的事情key。为了解决这个问题，我偶然发现了 React 的这种语法。

<div>
  {React.Children.toArray(texts.map((text) => <p>{text}</p>))}
</div>

今天就到这里啦。感谢阅读本文。如果有什么不清楚的地方，请告诉我。

欢迎在Twitter、Instagram和LinkedIn上关注我。

祝您编程愉快！