Reactjs不能忽略的key

前言

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 (
      <div>
        <ul>
        {
          this.state.list.map(value=>{
            return <Item value={value} />
          });
        }
        </ul>
        <button onClick={this.insert}>insert</button>
      </div>
      );
  }
}

export default class Item extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: ""
    };
  }

  onChange = (e)=>{
    this.setState({
      input: e.target.value
    })
  }

  render(){
    return (<li>Input {this.props.value} : <input type="text" onChange={this.onChange} value={this.state.input} /></li>);
  }
}

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

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

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

而如果我们使用了key，

render(){
    return (
      <div>
        <ul>
        {
          this.state.list.map(value=>{
            return <Item key={value} value={value} />
          });
        }
        </ul>
        <button onClick={this.insert}>insert</button>
      </div>
      );
  }

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

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

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

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

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

这样子保证当value和state不改变的时候，不会调用re-render。
我们可以通过React Performance Tool的Perf来看一下渲染次数的对比。

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

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

下面是打印的结果：
没有使用Key

使用Key

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

key的其他用法

看了这篇文章发现了一个很有趣的用法.

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

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

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

注意事项

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

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

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

以上

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!