前言

key是React唯一一个用来分辨子元素的标识。如果我们动态创建子React元素，而且这些子元素的顺序或者数量不确定的时候，那么就需要使用key这个属性。

Key的使用允许React来分辨哪些元素改变了，哪些是增加的，那些被删除了。在元素数组中，key应该被赋予给每个元素，从而每个元素都有一个稳定的身份证明。

不使用key，可能出现的错误

可能会造成渲染错误

我之前做了一个2048的小游戏，但是在移动的时候，总是会出现跳的现象：

可能会出现数据的错误

举个例子，目的是可以在最上方增加输入行：

export default class List extends React.Component {  index = 3  constructor(props) {    super(props);    this.state = {      list: [2,1]    };  }  insert = ()=>{    let list = [this.index++, ...this.state.list];    this.setState({      list    });  }  render(){    return (      
    
        
     
              {          this.state.list.map(value=>{            return 
                });        }        
     
        
     insert      
    
      );  }}export default class Item extends React.Component {  constructor(props) {    super(props);    this.state = {      input: ""    };  }  onChange = (e)=>{    this.setState({      input: e.target.value    })  }  render(){    return (
Input {this.props.value} : 
);  }}

看着似乎没有问题，但是由于缺少key值，会造成一个bug:

由上面的GIF中可以看到，原来在Input 2里面输入的值变成Input 3的值了，这是为什么？

由于没有使用key，造成React靠顺序来判断子元素，所以就造成了Input 2的元素，修改props成Input 3，而原本里面存着的state并没有发生变化，所以就显示的是Input 3的输入域里面显示着原本Input 2的值。

而如果我们使用了key，

render(){    return (      
    
        
     
              {          this.state.list.map(value=>{            return 
                });        }        
     
        
     insert      
    
      );  }

那么React就会很容易的辨别子元素，会变成下面这个样子，就不会造成上面的错误了：

缺少key，会造成性能的浪费

就像之前的那个例子里所展示，不加Key可能会造成更多的渲染。

我们在Item里面加一个shouldComponentUpdate的判断：

shouldComponentUpdate(nextProps, nextState){    return nextProps.value != this.props.value || this.state.input !== nextState.input;  }

这样子保证当value和state不改变的时候，不会调用re-render。

首先，我们增加几个功能reverse(调转), insert(插入到第一个) 和 delete(删除第一个)

其次，我们规定的步骤是1. insert 2.insert 3.reverse 4.delete，来看一看渲染的次数

下面是打印的结果：

使用Key

对比效果很明显，没有使用key的时候，render了14次。而使用key的时候，只render了2次(2次insert)。中间的差别很大，时间也差很多。

key的其他用法

看了发现了一个很有趣的用法.

按照作者所说，如果同一个组件，如果要修改其中的一些props会造成很多数据重新计算，可能会写很多判断逻辑，有的时候还是不如直接重新全部删除重新计算。

有的时候你想要销毁和重建组件，触发componentDidMount方法，重置state。那么就可以使用key这个属性。当你要销毁、重建组件的时候，你就可以通过改变key值来达到这个目的。

详细的可以看看上面的文章链接。

注意事项

• key值并不是需要全局唯一，而只需要在相邻的兄弟元素中唯一就好。

• 不要使用array的index来做为key值，因为如果array的顺序发生改变，那么key值也会发生改变。就会造成上面举的例子的那种问题。

排版有点乱。。。我会继续修改

以上