读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. React
  3. 正文

【05】React使用虚拟Virtual DOM

2020年10月09日 88点热度 0人点赞 0条评论

JavaScript的DOM树

DOM是结构化文本的抽象表达方式,在一个特定的web环境中它就是HTML文本,HTML中的每一个元素在DOM中有一个对应的节点,而且在HTML中的元素是存在包含关系,DOM节点就构成一个树型结构,称之为DOM树。

浏览器为了渲染和HTML格式的网页,会先把HTML文本解析为DOM树,再根据DOM树渲染出用户所看到的界面,当需要改变的界面的时候,就要修改DOM树上的节点。

浏览器渲染的步骤

  1. 构建DOM树,display:none的元素也在DOM树中,只是被隐藏起来了;
  2. 构建CSSOM树;
  3. 构建渲染树,在DOM节点上找到对应的css规则进行适配;
  4. 渲染树布局,对节点的位置进行布局【absolute、fixed和float元素位置发生偏移的时候,这一类元素已经脱离渲染树,也就是文档流】;
  5. 渲染树绘制,也就是我们看到的页面。

所以在做网页性能优化的时候,尽量减少对DOM的操作。因为对DOM的每次操作都会导致浏览器布局和绘制网页。

React使用虚拟Virtual DOM

然而react正好是使用Virtual DOM。react的jsx被Babel解析为创建React组件或者HTML元素的语句,并且react也没有通过这些语句来构建DOM树,而是直接构建虚拟DOM【虚拟DOM是对DOM树的抽象】。虚拟DOM不会触及到浏览器的部分,只是存在于JavaScript空间的树型结构,每一次自上而下渲染react组件时,会产生这次构建的虚拟DOM和上一次构建的虚拟DOM进行对比,在下一步骤修改真实的DOM树节点时,只更新发生改变的地方。

一个真实Element对象相当于虚拟DOM上的一个节点,具体参数:

  1. tagName:元素名称;
  2. props:元素属性【以键值对的方式存在】;
  3. children:该节点下的子节点数组。

Virtual DOM转化为真实的DOM树

render函数:渲染视图,将虚拟的DOM转化为真实的DOM

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: react
最后更新:2020年10月09日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
taro flutter mysql JavaScript node vue 闲谈 阅读 git Echarts react redux Nginx 随笔 hook 小程序 CSS 悦读 canvas
推荐文章
  1. 滤镜,好久不见
  2. React组件传值
  3. 【02】创建react应用的react元素和react组件
  4. useContext()组件状态共享或者传值
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (40)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号