diff算法

说说Real diff算法是怎么运作的？

1.如果两颗树的根元素类型不同，React会销毁旧树，创建新树

2.对与类型相同的React DOM元素，React会对比两者的属性是否相同，只更新不同的属性，当处理完这个DOM节点，React就会递归处理子节点。

3.遍历插入元素，如果没有key，React将改变每一个子节点删除重新创建，为了解决这个问题，React提供了一个key属性，当子节点带有key属性，React会通过key来匹配原始树和后来的树。

diff算法的运行规则：

<!--旧树-->
<section><List /></section>
<!--新树-->
<div><List /></div>
根元素不同，销毁：旧树
 
----------------------------------------------------------------------------------------
<!--改变前-->
<div classname="brfore" title="React"></div>
<!--改变后-->
<div classname="current" title="React"></div>
类型相同，属性不同，只更新：className属性
 
----------------------------------------------------------------------------------------
<!--改变前-->
<div style = {{color:'blue',fontSize:'18px'}}></div>
<!--改变后-->
<div style = {{color:'green',fontSize:'18px'}}></div>
类型相同，属性不同，只更新：color属性
 
----------------------------------------------------------------------------------------
<!--原DOM-->
<ul>
  <li key="1025">aa</li>
  <li key="1026">bb</li>
</ul>
<!--新的DOM-->
<ul>
  <li key="1024">cc</li>
  <li key="1025">aa</li>
  <li key="1026">bb</li>
</ul>
有key值，通过绑定key,React就知道带有key'1024'的元素是新的，对于'1025','1026'仅仅移动位置即可，如果没有key,就会销毁所有的列表元素，重新创建新的列表元素。

diff算法的原理？

Diff算法就是为了避免无效的dom操作，是我们的页面构建得到提升，diff算法通过对比新旧虚拟dom来找出真正dom变化的地方，他主要遵循三个层级，dom树层：只对同层的节点进行对比，只拥有创建和删除

组件层：如果是同层的节点就会继续diff算法，如果不是，那么就会将这个组件下的所有子节点进行删除，然后创建个新的，即使有很大的类似，也会删除重建

节点层：对于同级的节点，根据每个节点的key进行增删改和移动