React Key的作用

标签：react Key dom 渲染 React item key 组件 作用

一、key的作用：

　　1. 主要是对DOM渲染的性能优化，用来减少没必要的diff算法对比。当列表顺序发生改变时，如果不加key，不管数据是否发生改变，所有列表元素都会重新渲染，当列表元素没有发生改变时，值是在末尾产生新的元素，此时key的值加不加都是可以的，React只会渲染最后一个元素。如图：

 

假如说，本来一个 list 里面有 3 个相同的组件，后来你单击按钮，靠 setState 给这个 list 又增加了一个同类型的组件。假如没有 key 的话，react 会认为左侧图的前三个组件和右边图的前三个组件并不是一一对应的，它会把这三个组件从 dom 树上摘下来，然后再把这三个组件放到 dom 树上，最后再把第四个组件放到 dom 树上，也就是 3 次移除操作，4次增加操作。操作了 7 次 dom。但是，如果你给这三个组件，以 id 的形式赋给它们 key 值。那么 react 会认为，前三个组件都还在 dom 树上，因为 react 通过 key 值当做组件的唯一标识符。因此，react 只需要把第四个组件放到 dom 树上即可，只操作了一次 dom。

流程图大概如下： 2. 一个数组循环范围内，key值要求唯一，且不会变化，推荐用数组中唯一的id或身份证号等作为key值。 3. 适用index作为key的情况：列表翻页用于常规展示等。

二、开发注意事项：

1. 不加key值，浏览器会报错，但是不影响运行，但是性能会较差。具体原因同上述。

2. key={item}，如果当item是数值时候此时必报错，组件渲染还有可能会异常； 案例场景：渲染数字卡片异常   　　

　　

实际上只有210人，切换楼栋重新请求时，数值更大了，由此联想到，数值需要谨慎处理，如果是银行及金融类项目涉及金额，影响很大

标签：react,Key,dom,渲染,React,item,key,组件,作用
From： https://www.cnblogs.com/shyhuahua/p/17085432.html