https://github.com/xitu/gold-miner/blob/master/TODO/Under-the-hood-ReactJS.md

虚拟dom和diff算法

原理: react将dom抽象为虚拟dom, 然后通过比较新旧虚拟dom( diff算法 )， 只把变化的部分重新渲染

【201802-S】react技术栈底层分析 - 图1

React底层diff算法原理

  1. tree diff: 将新旧的两颗虚拟dom树，按照层级对应的关系进行对比（从头到尾对比）

对比规则: 相同层级的dom节点进行对比； 发现某节点已经不存在，则其下所有的节点将会完全被删除掉，不会进行比较

  1. Component Diff（组件对比）： 对比方法其实对比的是类型

如果类型相同，暂时不更新
如果类型不同，就需要更新，删除旧组件，在创建一个新的组件，插入到删除组件的位置

  1. element Diff ( 同一层级中元素之间的对比 )

概念: 在类型相同的组件内, 再继续对比组件内部的元素,查看内部元素是否相同,如果需要修改,找到需要修改的元素,进行针对性的修改! 这种方式就叫: Element Diff