了解Diff算法和虚拟Dom吗?

目录

1.原理

2.步骤

---

1.原理

        虚拟Dom：相对于浏览器的真实DOM所渲染出来的一个用来描述真实DOM结构的JS对象。

        如果组件内有相应的数据，数据发生改变时，render函数会生成一个新的虚拟Dom，这个新的虚拟Dom会和旧的虚拟Dom进行比对，找到需要修改的虚拟Dom的内容，然后去对应的真实Dom中修改。

        Diff算法：比较新旧虚拟DOM节点，并返回一个patch对象（作用：储存两个节点不同的地方），最后用patch里记录的信息更新真实DOM。

2.步骤

        1.Js对象表示真实的Dom结构，要生成一个虚拟Dom，再用虚拟Dom构建一个真实的Dom数，渲染到页面。

        2.状态改变生成新的虚拟Dom，将新的虚拟Dom和旧的虚拟Dom进行对比，这个过程就是Diff算法，利用patch记录差异。

        3.将记录的差异用在第一个虚拟Dom的真实Dom上，视图就更新了。