React 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人，切换楼栋重新请求时，数值更大了，由此联想到，数值需要谨慎处理，如果是银行及金融类项目涉及金额，影响很大😥。

　　

附上错误代码：

const roomTotal = useMemo(() => {
    if (workData?.total) {
      return Array.from(`${workData?.total}`).map((item, k) => (
        <span key={item}>{item}</span>   // 关键行: item作为key值重复
      ));
    }
    return <span>0</span>;
  }, [workData]);

3. key={item.name+index}，如果item.name是绑定可输入的input框，每一次输入都会触发onChange事件都会重新调用render()，所以每当绑定的key变化时diff算法就会生成一个全新的dom，组件会一直强制刷新render()，进而导致每次输入都会导致input会失去焦点。所以每一个item都需要一个唯一的确定的key值，这个key的作用就是避免diff算法重新生成一个全新的dom。

案例场景：科技化新建楼栋楼层，编辑楼层名称每输入一个字符input会失去焦点。

附上错误代码：

key = {floor.name + index} 

类似情况还有使用：时间戳、uuid作为key的。