React专栏

【05】React使用虚拟Virtual DOM

读心悦 · 10月9日 · 2020年 本文811字 · 阅读3分钟28

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

0 条回应

×