React（四）： key的作用

1、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" "复制代码

2、key的作用

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

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

注意：

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

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

转载于:https://juejin.im/post/5c4557b8f265da614f709723