最新(四)：虚拟DOM Diff算法解析12711271.pdfVIP

（四）：虚拟DOM Diff算法解析 React 中最神奇的部分莫过于虚拟DOM ，以及其⾼效的Diff算法。这让我们可以⽆需担 ⼼性 问题⽽”毫⽆顾忌”的随时“刷新”整个页⾯，由虚拟DOM来确保只对界⾯上真正 变化的部分进⾏实际的DOM操作。React在这⼀部分已经做到⾜够透明，在实际开发 中我们基本⽆需关⼼虚拟DOM是如何运作的。然⽽，作为有态度的程序员，我们总是 对技术背后的原理充满着好奇。理解其运⾏机制不仅有助于更好的理解React组件的⽣ 命周期，⽽且对于进⼀步优化React程序也会有很⼤帮助。 什么是DOM Diff算法 不同节点类型的⽐较 逐层进⾏节点⽐较 由DOM Diff算法理解组件的⽣命周期 相同类型节点的⽐较 列表节点的⽐较 ⼩结 什么是DOM Diff算法 Web界⾯由DOM树来构成，当其中某⼀部分发⽣变化时，其实就是对应的某个DOM 节点发⽣了变化。在React 中，构建UI界⾯的思路是由当前状态决定界⾯。前后两个状 态就对应两套界⾯，然后由React来⽐较两个界⾯的区别，这就需要对DOM树进⾏Diff 算法分析。 即给定任意两棵树，找到最少的转换步骤。但是标准的的Diff算法复杂度需要 O