React的key

Posted 2023-05-02

参考技术A react中的key的选择
父元素下面的子节点之间需要设置一个唯一的key值，方便diff算法计算。Key 应该具有稳定，可预测，以及列表内唯一的特质，一般使用一个唯一的id作为key值。还有元素的index，或者随机值，偶尔也会被用作key值，这几种key值的比较如下。

官方推荐使用元素的id作为key值，diff算法比较同级节点会通过这个唯一的key值做计算。

当元素的id没有确定时候，万不得已你可以使用元素索引 index 作为 key。这个策略在元素不进行重新排序时比较合适，如果有顺序修改，会导致性能变差，还可能引起组件状态的问题。如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。

当基于下标的组件进行重新排序时，组件 state 可能会遇到一些问题。由于组件实例是基于它们的 key 来决定是否更新以及复用，如果 key 是一个下标，那么修改顺序时会修改当前的 key，导致非受控组件的 state（比如输入框）可能相互篡改，会出现无法预期的变动。

通过Math.random()生成的key值具有不稳定性，会导致致许多组件实例和 DOM 节点被不必要地重新创建，这可能使得性能下降和子组件中的状态丢失

1.错误的指定key

2.正确设置key

数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值。

react---react中key值的作用

一、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>
        )