关于虚拟dom和diff算法

什么是虚拟dom

VDOM可以看做是一个使用JavaScript模拟了DOM结构的树形结构，可以把他理解为是一个js对象，不论是标签名称还是标签属性或者标签子集，都会在对应的右边的树形结构里

为什么要使用虚拟DOM

浏览器里一遍又一遍的渲染dom是非常消耗性能的，会引起大量的重绘和回流，应该尽量减少对DOM的操作，这成为了优化前端性能的必要手段，VDOM就是将DOM的对比放在了js层，通过对比不同之处，来选择新渲染的dom节点，从而提高渲染效率

如何实现虚拟dom

方法一：react官方API创建虚拟dom
React.creatElement(‘div’,{id:‘my-div’},‘虚拟dom’)
但是如果使用官方的API去做的话，只有一层dom结构还好，但是如果有多层的话，书写代码就很麻烦，而且对程序员极其不友好，这种方式书写html代码很麻烦
方法二：react官方提供了一种利于写虚拟dom的语法-----jsx语法
可以直接在js文件中书写html代码，简单易懂，

实现虚拟dom的底层原理

1，实现虚拟dom需要用到snabdom
2，它有两个核心函数h（）和patch（）
3，h函数:创建虚拟dom
4，patch函数有两个阶段
第一阶段：patch（container,vonde）
container:真实的dom
vnode：生成的虚拟dom
第一阶段为vnode的第一次渲染，将初次生成的真实的dom结构挂载到真实的dom上面
5，第二阶段：patch(vonde,newvnode)
是使用diff算法对比两个参数的差异，进而更新参数变化的dom节点

diff算法