请选择 进入手机版 | 继续访问电脑版

什么是虚拟DOM即Virtual DOM

前端开发  / React.js  / 倒序浏览   © 著作权归作者本人所有

#楼主# 2020-3-9

跳转到指定楼层

虚拟DOM是React用于优化与浏览器交互的一种技术,在React或vue出现之前,许多现有框架都在每次更改时直接操作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()Component时,指定一个不同于上一个状态的状态时,React将该组件标记为dirty。这很关键:React仅在组件显式更改状态时更新。

接下来发生的是:

React会相对于标记为脏组件的组件更新Virtual DOM(进行一些额外的检查,如触发shouldComponentUpdate())
运行差异算法以协调更改
更新真实的DOM
为什么虚拟DOM有用:批处理
关键是React通过批量更改需要同时更改的所有元素来对很多更改进行批处理并对真实DOM执行唯一更新,因此浏览器必须执行的重新绘制和重排才能呈现更改。只执行一次。

转播转播
回复

使用道具

50

主题

51

帖子

187

积分

网站编辑

Rank: 8Rank: 8

积分
187
极客先生 发表于 2020-3-11 11:18:30

虚拟DOM很高效

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

admin

管理员

  • 主题

    99

  • 帖子

    101

  • 关注者

    0

手机版|ObjectX 超对象 |粤ICP备20005929号
Powered by  © 2019-2020版权归ObjectX 超对象