首先，不设置Key，控制台会报错；这应该很多同学们都遇到过啦，下面通过例子告诉大家

Warning: Each child in a list should have a unique "key" prop. Check the render method of `Index`. See https://fb.me/react-warning-keys for more information.

 

通过一组表单，输入值后，打乱顺序，看看会发生什么？

import React, { useState } from 'react';
import { Input, Button } from 'antd';


const Index:React.FC =  (props) => {
 const [list, setList] = useState([
    { text: '组件1' , id: 1 },
    { text: '组件2' , id: 2 },
    { text: '组件3' , id: 3 },
  ]);

 const test = function() {
   setList([
      { text: '组件1' , id: 1 },
      { text: '组件3' , id: 3 },
      { text: '组件2' , id: 2 }
    ])
  }
 
 return (
   <div style={{ margin: '3rem'}}>
     <h2>Demo Key</h2>
     <Button onClick={test}>打乱顺序</Button>

     <h3>不设置Key</h3>
     {
       list.map((item, index) => {
         return <div>
           <span>组件-{item.text} index-{index}</span>
           <Input />
         </div>
     })
     }

     <br />
     <h3>设置Key</h3>
     {
       list.map((item, index) => {
         return <div key={item.id}>
           <span>组件-{item.text} index-{index}</span>
           <Input />
         </div>
     })
     }
 </div>
 );
}

export default Index;

 

 

们可以观察一下，打乱顺序后，有无指定key属性运行结果的异同。相同的是，每一个项的input中的value都得到了保留，不同的是，如果我们不指定key属性，列表中组件的标题和input在打乱顺序之后，好像已经对不上号了，那么，是什么原因造成的呢？

 

我们来简单的了解一下react的diff算法策略，我们都知道，react为了提升渲染性能，在内部维持了一个虚拟dom，当渲染结构有所变化的时候，会在虚拟dom中先用diff算法先进行一次对比，将所有的差异化解决之后，再一次性根据虚拟dom的变化，渲染到真实的dom结构中。

 

而key属性的使用，则涉及到diff算法中同级节点的对比策略，当我们指定key值时，key值会作为当前组件的id，diff算法会根据这个id来进行匹配。如果遍历新的dom结构时，发现组件的id在旧的dom结构中存在，那么react会认为当前组件只是位置发生了变化，因此不会将旧的组件销毁重新创建，只会改变当前组件的位置，然后再检查组件的属性有没有发生变化，然后选择保留或修改当前组件的属性，因此我们可以发现如果我们指定了唯一的key值，如果只是打乱了数据源，数据源渲染出来的每一个子组件都是整体数据发生变化，而如果不显式指定key值，结果好像有点出乎我们的意料。

 

那么，如果没有显式指定key值，会发生什么事情呢？其实，如果没有显式指定，react会把当前组件数据源的index作为默认的key值，那么，这时候会发生什么事呢？我们以第二项作为例子，由于我们没有显式指定key值，key值会被默认指定为index，也就是1。当我们打乱了数据的顺序，数据源的第二项由{text: '组件2', id: 2}变成了{text: '组件3', id: 3}，这时候执行diff算法时，发现key值为1的组件在旧的dom结构中存在，并且组件的位置还是原来的位置，所以，直接保留了原组件，但是组件的标题属性已经改变了，接着，修改组件的属性，渲染，于是，我们就看到了，输入框没改变，但是标题变了，很显然，这个结果，有时候并不是我们的本意。而如果我们显式指定了唯一的key值，依旧以第二项作为例子，执行diff算法时，发现第二项的组件变化了并且新的组件在旧的dom结构中存在，于是将第三项整体移动到第二项，然后检查属性有没有发生变化，渲染，最终出现的结果，就是整体的顺序改变了。

 

因此，在实际开发使用中，我们需要注意什么呢？

 

首先，我们要确保key值的唯一，事实上如果key值不唯一的话，react只会渲染第一个，剩下的react会认为是同一项，直接忽略。其次，尽量避免使用index值作为组件的key值，虽然显式使用index作为key值可以消除warning，但是，我们举例出现的情况依旧会出现

 

原文：https://blog.csdn.net/handsomexiaominge/article/details/86560003