React虚拟DOM的差异检测机制

对于类型没变的情况则比较元素的属性，得出差异后只更新相应属性，比如 className。样式有更新也只计算出变化的样式属性然后只更新该属性。

组件节点的 diff

对于自己写的组件，类型变化时同 DOM 节点一样，将整个组件实例销毁，其中各状态将丢失，所有子节点也都销毁，这些组件的 componentWillUnmount() 生命周期函数将被触发。然后实例化新类型的组件替换在该位置，新实例化的组件其 componentWillMount() 及 componentDidMount() 生命周期函数将顺次触发。

如果该位置组件类型没变，说明只需要根据变化的 props 更新组件即可，无需重新实例化新的组件。组件实例中的状态将在两次渲染中被保留复用，组件的 componentWillReceiveProps() 及 componentWillUpdate() 生命周期函数将触发。

子节点的遍历及 key 属性

上面描述了节点对比后的处理。对于节点内子节点，递归遍历时，应用相同的逻辑。考察下面的示例代码：

  
first
  
second



  
first
  
second
+  
third

React 在遍历

的子节点时，能够将前两个
• 元素匹配，保持不动，然后将新增的
• third
附加在列表最后，完成更新。

如果新插入的元素不在列表最后，而是在最前面或中间，事情就开始发生变化。

  
Duke
  
Villanova



+  
Connecticut
  
Duke
  
Villanova

这时 React 简单地按位置来对比更的模式就变得不那么智能了。由前文所述，

• 在进行第一个子元素
• 的对比时，发现其内容由
• Duke
变为了
• Connecticut
，于是将该位置的元素更新。
• 继续对比，发现原来第二个位置的
• Villanova
变为了
• Duke
，执行更新操作。
• 再继续发现需要新增
• Villanova
元素。

这是 React 真实的流程，并不是我们一眼就能看出来的那个样子，只需要在列表开头插入那个新增的元素，将其他子元素保留即可。

所以，对于这样的列表类型，如果元素频繁变动，势必导致更新的效率会很低。问题的根本在于 React 不能识别前后两次渲染哪些元素其实是同一个，而是根据其在组件树中的位置来进行 diff 的。如果我们手动为元素指定一个唯一标识，这个标识在前后再次渲染时如果不变的话，这样就相当于告诉 React 它们是同一个元素，而不是按照其所在列表中的位置来进行 diff。

这便是元素身上的 key 属性。其值一定是能够唯一标识该元素的，这个唯一是指兄弟节点之间唯一即可，比如列表中同类型的列表元素。如果兄弟节点 key 重复，React 会有警告提醒。

再来看上面的例，

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

通过读取元素身上的 key，再次比较时 React 能够智能地得出结论，本次更新只需要插入

• Connecticut
，剩余的其他子节点可直接复用。这样处理子节点的 diff 时效率就大大提升了。

所以你通过遍历方式生成一堆子节点时，React 会提示你需要为元素设置 key 属性。

Warning: Each child in a list should have a unique "key" prop.

默认情况下，如果没有显式指定 key，React 默认使用其在列表中的索引作为 key。但这个属性最好是来自需要渲染的数据条目的 id，这样能够最大程度地与数据保持一致，如果数据变化了，id 必然变化，则重新渲染。直接使用 for 循环中的 index 索引来做为 key 是不推荐的。因为索引不体现数据的变化，如果列表数据变化了，比如进行了排序，原来位置的数据可能不是原来的那条数据了，但因为索引没变，React 按照每个位置还是同一个元素的 diff 逻辑来处理，该位置的组件复用前一次渲染的状态，势必产生 bug。下面是一个简单展示这一问题的示例：

function Item({ name }) {
  const [score, setScore] = useState();
  return (
    <div>
      name:{name}
      <input
        type="text"
        onChange={e => {
          setScore(e.target.value);
        }}
      />
      score is: {score}
    </div>
  );
}

function App() {
  const [persons, updatePersons] = useState(["tom", "david"]);
  return (
    <div>
      <h3>set age for each person</h3>
      {persons.map((name, index) => {
        return <Item key={index} name={name} />;
      })}
      <div>
        <button
          onClick={() => {
            updatePersons(prev => ["lily", ...prev]);
          }}
        >
          add person
        </button>
      </div>
    </div>
  );
}

上面的示例遍历一个包含了姓名的数组，为每个人生成一行可输入分数的表单项。同时我们将每个生成项的 key 设置成索引 index。



展示将 `key` 设置成索引导致组件内部状态不对的问题

可以看到，分数设置在列表中子组件中，当添加新的条目后，原来索引位置的组件复用之前的组件状态，因为该位置 key 相同，不会整个重新渲染。所以新增在第一位的 lily，本来还没有为其设置分数，但它使用了原来在那个位置的 tom 的分数，同时，其他元素因为位置变化了，他们所持有的状态都错位了。

修正 key 之后再次操作表现就正常了。

function App() {
  const [persons, updatePersons] = useState(["tom", "david"]);
  return (
    

      
set age for each person
      {persons.map((name, index) => {
-        return ;
+        return ;
      })}
      

         {
            updatePersons(prev => ["lily", ...prev]);
          }}
        >
          add person
        
      
    
  );
}

这里假设每条数据其 name 值是不一样的，所以将它作为列表元素的唯一标识。



修正 `key` 之后的正常表现

问题的解决

回到文章开头的问题，就可以理解其表现了。

const data1 = [10, 20];
const data2 = [50, 20, 10];

默认情况下，React 使用 index 作为 key。

• 对于第一条数据，其值由 10 变化到 50，动画正常，当再次设置时，其由 50 变回到 10。因为组件并没有重新初始化，所以其初始值确实是 50，所以看到了由 50 到 10 这个缩减的动画。
• 而对于第二条数据，因为前后值没变化，执行动画的 setTimeout 都不会执行。

修正的方法可以为元素指定一个随机的 key，这样每次组件都会重新渲染，不会复用之前的状态。

function App() {
  const [data, setData] = useState(data1);
  return (
    

       {
          setData(prev => (prev === data1 ? data2 : data1));
        }}
      >
        switch data
      
      {data.map((score, index) => {
        return (
-          

+          

            
          
        );
      })}
    
  );
}



修正后的百分比柱状条效果

将 key 设置成随机值是不推荐的做法，因为这样 React 就没法在渲染过程中对组件进行重用的优化。但像这里的特殊情况，你需要知道的是其中的原理，然后清楚自己在这样做时的影响。

总结

虚拟 DOM 将操作浏览器 DOM 的成本一部分转嫁到了 Javascript 中，即进行差异计算的成本。提高了渲染的效率，但某些情况下也会是一个坑。

需要注意的是，React 的差异算法高效性是在两个假设前提下进行的，

• 如果父元素不同，其子节点产生不同的树。
• 开发者可通过为元素指定 key 来标识元素的唯一性，提高 React 差异检测时的效率。

相关资源

• Reconciliation
• Index as a key is an anti-pattern