virtual-dom & diff

S: 实际dom树非常复杂（单个node挂载的属性巨多，200来个），没有优化策略，频繁触发重排，对性能消耗严重

A: 虚拟dom：与实际dom树结构一致，只存储必要信息 tagName\ props\ children

createElement：创建虚拟dom

diff：深度优先 dfs -> patch

patch：需要变更的补丁，type: replace\ reorder\ props\ text, node\content

深度优先实际dom树，对patch存在的变更触发dom更新（replaceChild \reOrder\ setProps\ text）

key用来做diff-reOrder算法的标志\定位 （方便复用）

转载于:https://www.jianshu.com/p/c75b93ac2b2a