React diff的原理是什么

一、是什么

跟Vue一致，React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，使我们的页面的构建效率提到了极大的提升

而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处

传统diff算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，react将算法进行一个优化，复杂度降维为O(n)

二、原理

react中diff算法主要遵循三个层级的策略：

• tree层级
• conponent 层级
• element 层级

#tree层级

React 只会对相同层级的节点进行比较，如果节点跨层级移动，会直接删除旧节点，创建新节点。

只有删除、创建操作，没有移动操作，如下图：

react发现新树中，R节点下没有了A，那么直接删除A，在D节点下创建A以及下属节点，上述操作中，只有删除和创建操作

conponent层级

如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的

当component D换成了component G 后，即使两者的结构非常类似，也会将D删除再重新创建G

element层级

对于同一层级的节点，React 会用唯一的 key 来标识，提供了三种操作：插入、移动和删除。React 会尽量复用 key 相同的节点，减少 DOM 操作。如下图：

通过key可以准确地发现新旧集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将旧集合中节点的位置进行移动，更新为新集合中节点的位置

三、注意事项

对于简单列表渲染而言，不使用key比使用key的性能，例如：
将一个[1,2,3,4,5]，渲染成如下的样子：

<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>

后续更改成[1,3,2,5,4]，使用key与不使用key作用如下：

1.加key
<div key='1'>1div>             <div key='1'>1div>     
<div key='2'>2div>             <div key='3'>3div>  
<div key='3'>3div>  ========>  <div key='2'>2div>  
<div key='4'>4div>             <div key='5'>5div>  
<div key='5'>5div>             <div key='4'>4div>  
操作：节点2移动至下标为2的位置，节点4移动至下标为4的位置。

2.不加key
<div>1div>             <div>1div>     
<div>2div>             <div>3div>  
<div>3div>  ========>  <div>2div>  
<div>4div>             <div>5div>  
<div>5div>             <div>4div>  
操作：修改第1个到第5个节点的innerText

如果我们对这个集合进行增删的操作改成[1,3,2,5,6]

1.加key
<div key='1'>1div>             <div key='1'>1div>     
<div key='2'>2div>             <div key='3'>3div>  
<div key='3'>3div>  ========>  <div key='2'>2div>  
<div key='4'>4div>             <div key='5'>5div>  
<div key='5'>5div>             <div key='6'>6div>  
操作：节点2移动至下标为2的位置，新增节点6至下标为4的位置，删除节点4。

2.不加key
<div>1div>             <div>1div>     
<div>2div>             <div>3div>  
<div>3div>  ========>  <div>2div>  
<div>4div>             <div>5div>  
<div>5div>             <div>6div> 
操作：修改第1个到第5个节点的innerText

由于dom节点的移动操作开销是比较昂贵的，没有key的情况下要比有key的性能更好