React中key的用处

key的原理

React 元素可以具有一个特殊的属性 key，这个属性不是给用户自己用的，而是给 React 自己用的。如果我们动态地创建 React 元素，而且 React 元素内包含数量或顺序不确定的子元素时，我们就需要提供 key 这个特殊的属性。简单来说，react利用key来识别组件，它是一种身份标识标识。有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。

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

    • 数组创建的组件渲染过程

    由数组创建的组件在渲染的时候，可以以数组的index作为key对页面进行渲染。但一些页面动态操作，例如对数组的排序、增加和删除操作，这时index作为key会导致展示错误的数据。
    以数组重新排序为例：

  • 组件重新render得到新的虚拟dom；
  • 新老两个虚拟dom进行diff，新老版的都有 key=0 的组件，react认为同一个组件，则只可能更新组件；
  • 然后比较其 children ，如果发现内容的 文本不同 ，例如lable标签变化（由a--->c)，而input组件并没有变化，这时触发组件的 componentWillReceiveProps 方法，从而更新其子组件文本内容;
  • 因为组件的 children 中input组件没有变化，其又与父组件传入的任 props 没有关联，所以input组件不会更新(即其 componentWillReceiveProps 方法不会被执行)，导致用户输入的值不会变化。

    • 这就是index作为key存在的问题，所以 不要使用index作为key 。

    解决方案：

    可以在input标签上添加value属性，这样对数组进行操作时，会触发input标签的重绘。组件的props属性变化时，会触发组件生命周期的 componentWillReceiveProps ，从而重新渲染input的值。

    key的值要稳定唯一

    在数组中生成的每项都要有 key 属性，并且 key 的值是一个永久且唯一的值，即稳定唯一。在理想情况下，在循环一个对象数组时，数组的每一项都会有用于区分其他项的一个键值，相当数据库中主键。这样就可以用该属性值作为 key 值。但是一般情况下可能是没有这个属性值的，这时就需要我们自己保证。但是，需要指出的一点是，我们在保证数组每项的唯一的标识时，还需要保证其值的稳定性，不能经常改变。例如下面代码：

    this.state.data.map(el=><MyComponent key={Math.random()}/>)

    上面代码中中 MyComponent 的 key 值是用 Math.random 随机生成的，虽然能够保持其唯一性，但是它的值是随机而不是稳定的，在数组动态改变时会导致数组元素中的每项都重新销毁然后重新创建，有一定的性能开销；另外可能导致一些意想不到的问题出现。

    key的值要保持稳定且唯一，不能使用 random 来生成 key 的值。

    在不能使用random随机生成 ke y时，我们可以像下面这样用一个全局的 localCounter 变量来添加稳定唯一的 key 值。 

    var localCounter = 1;
this.data.forEach(el=>{
    el.id = localCounter++;
//向数组中动态添加元素时，
function createUser(user) {
    return {
        ...user,
        id: localCounter++

    key其它注意事项
    

    key值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的key都要保持唯一
    
不仅仅在数组生成组件上，其他地方也可以使用key，主要是react利用key来区分组件的，相同的key表示同一个组件，react不会重新销毁创建组件实例，只可能更新；key不同，react会销毁已有的组件实例，重新创建组件新的实例。
    
  this.state.type ? 
    <div><Son_1/><Son_2/></div>
    : <div><Son_2/><Son_1/></div>

    例如上面代码中，this.state.type的值改变时，原Son_1和Son2组件的实例都将会被销毁，并重新创建Son_1和Son_2组件新的实例，不能继承原来的状态，其实他们只是互换了位置。为了避免这种问题，我们可以给组件加上key。
    
  this.state.type ? 
    <div><Son_1 key="1"/><Son_2 key="2"/></div>
    : <div><Son_2 key="2" /><Son_1 key="1"/></div>

    这样，this.state.type的值改变时，Son_1和Son2组件的实例没有重新创建，react只是将他们互换位置。
    

    参考文献：
    

    React之key详解