明白为什么ReactVirtualDOM
写这篇文章了吗？可能的原因是我之前在学习框架的时候，只学习了语法和原理，并不能回答使用框架的好处的问题。也正是因为这种情况，今天我来探讨一下VirtualDOM的工作原理。在了解VirtualDOM之前什么是DOM！什么是DOM？文档对象模型(DOM)HTML、XML和SVG文档的编程接口。它提供了文件（树）的编程表示，并定义了访问和更改文件的结构、样式和内容的方法。（摘自MDN的部分描述）从下图我们可以知道DOM是一个从文档根节点向下延伸的树状结构，下面附上了很多节点参考MDN的图纸。我们经常使用js来操作DOM更新浏览器在更新被触发时重新声明屏幕，回流时间和回流(re)这两种更新机制。当重绘屏幕元素并改变样式时，触发(background-color,color...)reflow改变屏幕的操作结构(structuralarrangement)触发(改变窗口大小，css属性：position,width,height...)很简单，这是一个正常运行的原因，只更新需要更改的部分，这是一个非常重要的播放器。VirtualDOM的过程1.当使用setState()方法时，React会先复制一份dom（即VirtualDOM）2.发生变化时，会比较之前的virtualDOM和当前的差异虚拟DOM。action组件的不同状态3.VirtualDOM首先使用算法（diff计算实际部分，比较差异，然后移动真实DOM，有效减少自身外观）提高更新效果。一般是这样的html结构applelemon
这是Virtual的结构DOM,是JavaScript模拟的一个对象，会以如下格式存储{tag:"div",props:{id:"header"},children:[{tag:"h1",props:{className:"title"},children:["Apple"]},{tag:"p",props:{className:"content"},children:["lemon"]}]}下面简单模拟一下虚拟dom过程createELement:先使用VirtualDOM提供的createELement方法生成真实DOMvarcount=0;变种树=渲染（计数）；varrootNode=createElement(树);document.body.appendChild(rootNode);2.count变化时与VirtualDOM进行比较然后将差异打到真实DOM上什么是补丁？Patch是指在原有的DOM结构上进行改动diff算法的图片来源是https://www.cronj.com/blog/di...传统的diff算法复杂度为O(n3)，处理100个节点比100??万次，以及VirtualDOM的diff算法对于O(n)和传统的差异预测：1.VirtualDOM比较同一层次的节点2.在同一层次重新出现相同节点的唯一关键是避免再次创建移动3.如果发现它的子节点少了，也会一起淘汰，不再进行比较。开发者只需要在数据逻辑上运行一次更新机制就可以自动处理一切。想要详细了解diff算法，可以持续关注更新。
