react---react中key值的作用

Posted 2022-07-17 nanianqiming

一、React中key值得作用

react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，简单说，react利用key来识别组件，他是一种身份标识，就像每个人有一个身份证来做辨识一样。每个key 对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建

 

key值相同

如果两个元素是相同的key，且满足第一点元素类型相同， 若元素属性有所变化，则React只更新组件对应的属性，这种情况下，性能开销会相对较小

 

key值不同

在render函数执行的时候，新旧两个虚拟DOM会进行对比，如果两个元素有不同的key，那么在前后两次渲染中就会被认为是不同的元素，这时候旧的那个元素会被unmount，新的元素会被mount

//更新前
render()
  return (
      <List key = ‘1‘/>
    );

//更新后
render()
  return (
      <List key = ‘2‘/>
    );

 

 

 

二、例子

//tree1
 <ul>
  <li key=‘1‘>1</li>
  <li key=‘2‘>2</li>
</ul>
//tree 2
 <ul>
  <li key=‘1‘>1</li>
  <li key=‘3‘>3</li>
  <li key=‘2‘>2</li>
</ul>

 

如果没有key值得情况下，react并不会执行插入操作，他直接会移除原先的第二个子元素，然后再append进去剩下的子元素，而其实我们这个操作只只需要一个insert操作就能完成。为了解决这种问题，react需要我们提供给一个key来帮助更新，减少性能开销

 

如果有key值得情况下,react就会通过key来发现tree2的第二个元素不是原先tree1的第二个元素，原先的第二个元素被挪到下面去了，因此在操作的时候就会直接指向insert操作，来减少dom操作的性能开销

 

三、不推荐用属性中的index来做key值

大部分情况下我们要在执行数组遍历的时候会用index来表示元素的key。这样做其实并不是很合理。我们用key的真实目的是为了标识在前后两次渲染中元素的对应关系，防止发生不必要的更新操作。那么如果我们用index来标识key，数组在执行插入、排序等操作之后，原先的index并不再对应到原先的值，那么这个key就失去了本身的意义，并且会带来其他问题

 

四、注意事项

React中的key 值必须保证其唯一和稳定性

下面案例中key的值以Math.random() 随机生成而定，这使得数组元素中的每项都重新销毁然后重新创建，有一定的性能开销

        dataList.map((item,index)=>
            return <div style=mystyle key=Math.random()>item.name</div>
        )