媒介：

关于react的假造dom以及每次衬着更新的dom diff，网上文章许多。然则我一向信仰一个准绳，即：凡是庞杂的学问，明白以后都只需要影象简朴的东西，而想简朴、准确形貌一个庞杂学问，是极难题的事。

正文

dom diff是什么？
1.从根节点最先遍历一切节点；
2.关于差别范例的标签，删除原标签，新建标签；
3.关于范例雷同、属性差别的标签，只修正属性；
4.关于同一个父节点下的复数同范例标签（即列表范例），基于key对照、修正。

剖析

关于1：

-遍历用的是前序遍历（先序遍历）

关于2：

-差别范例的标签是指：比方div和span就是差别范例的标签
-假如同一个位置的标签范例转变（依旧以div和span为例），那末直接删除div标签，新建一个span标签，从新衬着。底本的div标签里的一切都跟新的span标签没有关系
-关于自定义的组件比方<Header />、<TodoList />之类的也实用
-标签位置只相关于父节点有意义。假定底本A节点的父节点是B，更新后A节点的父节点是C，那末关于dom diff来讲，底本的A节点会被烧毁，在C节点下的A节点是一个新的节点，跟底本的A节点没有关系

关于3：

-这一个比较好明白，关于仅仅属性差别的标签，修正属性即可

关于4

-假定一个div下有五个span节点，此时我们要插进去一个节点

假造dom并不晓得插进去后是ABFCDE，而会以为除了AB之外的节点都转变了
所以关于假造dom来讲此时是ABGHIJ，付出了分外的斲丧。
因而react引入了key的观点。两个key雷同的节点，假造dom会以为是同一个节点，从而对其举行比较。引入了key以后，react就晓得节点是ABFCDE了。