虚拟DOM

真实DOM

浏览器渲染引擎工作流程，大致分为五步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。 

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。
 

虚拟DOM

1.state数据

2.JSX模板

3.数据+模板相结合，生成虚拟DOM 比如

['div', {id: 'abc'}, ['span', {}, 'hello']]

4.用虚拟DOM的结构生成真实的DOM 

<div id = 'abc'><span>hello</span></div>

5.state发生变化

6.数据+模板生成新的虚拟DOM 

['div', {id: 'abc'}, ['span', {}, 'bye']]

7.比较原始虚拟DOM新的虚拟DOM的区别，找到区别是span中的内容

8.直接操作DOM，改变span中得内容

好处：

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制

虚拟DOM中的diff算法

用虚拟DOM完成数据驱动涉及到关键的一点就是我们如何比较两个虚拟DOM的差异。
首先我们得确定发生差异的来由，归根结底是组件的state发生了变化，调用了setState方法，之后我们就会生成新的虚拟DOM与旧的进行比对

1.同级比较

 

diff算法中只会比较同层级的元素，一旦发现某一级之间有所不同，则会弃置其子级，直接用从新的差异的一级以及其下的所有子级替换老的。

2.引用key值

for循环中如果没有给每个item所在标签增加一个key值，vue和react中都会发出警告，建议加上，这是因为当进行虚拟DOM比对时，需要比较出相同的元素和不同的，没有key就很难一一对应，需要做两层循环比较，用上了key值则可以清楚比较出哪一个新增或删除了什么。

使用refs

下面是几个合适使用refs的情况

• 管理焦点，文本选择或者媒体播放
• 触发强制动画
• 集成第三方DOM库

• 创建Refs

  Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

  访问Refs

  当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

  ref的值根据节点的类型而有所不同

  当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
  当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。