React（四）： key的做用

一、key的使用场景

render() {
    console.log(this.state);
    return (
        <div>
        <h3>用户列表</h3>
          {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
       </div>
    );
  }复制代码

在项目开发中，key属性的使用场景最多的是由数组动态建立的子组件的状况，须要为每一个子组件添加惟一的key属性值。可参考实例demo，不设置key的话会出现下面这样的warning。

"Warning: Each child in an array or iterator should have a unique 'key' prop.%s%s See https://fb.me/react-warning-keys for more information.%s" "复制代码

二、key的做用

有了key属性后，就能够与组件创建了一种对应关系，react根据key来决定是销毁从新建立组件仍是更新组件。

• key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。
• key值不一样，则react先销毁该组件(有状态组件的componentWillUnmount会执行)，而后从新建立该组件（有状态组件的constructor和componentWillUnmount都会执行）

注意：

• key值必定要和具体的元素一一对应到。
  
• key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上。
  
• 尽可能不要用数组的index去做为key。
  
• 永远不要试图在render的时候用随机数或者其余操做给元素加上不稳定的key，这样形成的性能开销比不加key的状况下更糟糕。
  

https://www.tuicool.com/articles/UVvaMz