React 的key详解

我们在学React的list章节的时候，一定会提到key这个属性，key是给React用的，主要是为了区分不同的组件，是组件的唯一标识，当我们没用设置key属性的时候，React会给出警告，并且会把数组的index作为组件的key值，所以说key对于组件是必不可少的，那有同学可能会问了，如果key这么重要的话，为什么我只在用数组的map方法返回的组件中用过key，其它组件我却没有用过，其实对于其它组件来说，它的固定的位置就是key，可以互相区分和定位

接下来说说用index作为key的坏处：.不稳定，数组经过排序，删除，插入元素，里面组件的的key可能就变了，这会带来一些难以预料的错误

看下面的例子，输入框里的时间是我们可以选的，初始为空

当我们执行添加操作，你会发现，初值不为空,并且数值和插入之前已存在的组件输入框相同

为了解释这种现象，我们先来讲，在什么情况下组件会重新创建，什么情况下只是更改属性但不重新创建

请看下面的例子：

var flag = 0;
class Test extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      name: 'yewenjun'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  componentDidMount() {
    console.log('DidMount');
  }
  
  componentWillUnmount() {
    console.log('unmount');
  }
  
 handleClick () {
   flag ++;
   this.setState(state => ({
     name: state.name === 'yewenjun' ? 'yewenhui' :'yewenjun'
   }))
 }
  
  render() {
    const name = this.state.name;
    return (<Name onClick={this.handleClick} name={name} key={flag} />)
  }
}

class Name extends React.Component {
  constructor(props) {
    console.log(props);
    super(props);
  }
  
  componentDidMount() {
    console.log('child DidMount');
  }
  
  componentWillUnmount() {
    console.log('child unmount');
  }
  
  render() {
    return (<div onClick={this.props.onClick}>{this.props.name}</div>)
  }
}
ReactDOM.render(
  <Test />,
  document.getElementById('root')
);

有两个组件，Test,和Name，组件结构很简单，就不啰嗦了，直接讲现象，

全局变量：flag作为key，每次点击Name，均会改变key，看控制台打印的信息

我们会发现，Name这个组件，销毁之后重新创建了

加下来我们把key改为 定值，把key++注释掉即可

这时候我们会发现，控制台没有打印出刚才的信息，所以通过比较我们可以发现，一个组件， 重新创建与否，取决于它的key值变还是不变

好接下来，在解释之前的现象：为什么我往数组里添加了空值，但渲染出来的组件为什么却是有值的，并且还有原先的一样，

这是因为添加在数组的最开头，React在创建好新的虚拟dom之后会和老的虚拟dom之间进行diff运算，哎，发现，key为0的新老虚拟dom都有，就不会重新创建了，只会更新，然后还发现，input节点是一样的，所以就复用先前的input了，所以才会有值，并且和先前的一样，另外还有一个key为1的虚拟dom，和原先一比，发现没有，就会创建这个key为1的组件了，值还是原先已有的值

 

希望上面的解释可以让大家对key有更深的了解，写的不好请多包涵