简述dom diff原理

前言：

关于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了。