虚拟DOM

虚拟DOM是React用来优化与浏览器交互的一种技术

在React出现之前,许多现有框架都在每次更改时直接操作DOM。

首先,什么是DOM?

DOM(文件对象模型)是页面的树形表示形式,从<html>标签,深入到每个子节点(称为节点)中。

它保存在浏览器的内存中,并直接链接到您在页面中看到的内容。 DOM具有一个API,可用于遍历,访问每个节点,对其进行过滤,对其进行修改。

如果您未使用jQuery和朋友提供的抽象API,则该API是您可能多次看到的熟悉语法:

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

React保留了与React渲染有关的DOM表示形式的副本:虚拟DOM

虚拟DOM解释

每次DOM更改时,浏览器都必须执行两项密集的操作:重新绘制(对元素的视觉或内容更改不影响相对于其他元素的布局和位置)和重排(重新计算页面一部分的布局-或整个页面的布局)。

当需要在页面上进行更改时,React使用虚拟DOM来帮助浏览器使用更少的资源。

您打电话的时候setState()在一个组件上,指定一个不同于上一个的状态,React将该组件标记为肮脏的。这很关键:React仅在组件显式更改状态时更新。

接下来发生的是:

  • React会相对于标记为脏组件的组件更新Virtual DOM(带有一些额外的检查,例如触发shouldComponentUpdate()
  • 运行差异算法以协调更改
  • 更新真实的DOM

虚拟DOM为何有帮助:批处理

关键是React通过批量更改所有需要更改的元素来对大量更改进行批处理并对真实DOM执行唯一更新,因此浏览器必须执行的重绘和重排操作才能呈现更改。只执行一次。

免费下载我的反应手册


更多反应教程: