React中使用shortid生成唯一key的两种方式哪种更优？

嘿，这个问题问到点子上了——React中key的核心作用是帮助框架识别列表中元素的身份，进而优化渲染性能和组件状态稳定性，咱们来逐个分析这两种方案：

方式一：提前为数组元素生成固定id #

这种方案是更推荐的做法，原因如下：

• key稳定唯一：每个数组元素的id在初始化时就生成完毕，后续不管组件怎么重渲染，这个id都不会变。React能准确判断哪些元素是新增、删除或修改的，只会更新必要的组件，避免不必要的DOM销毁和重建，性能更优。
• 组件状态得以保留：如果列表项是带状态的组件（比如输入框、开关等），固定的key能保证组件在重渲染时不会被重新创建，状态不会丢失。
• 代码维护性好：id和数据绑定在一起，后续如果需要对数组做增删改操作，也能基于这个唯一id进行精准操作。

示例代码的写法完全没问题，唯一可以优化的点是：如果你的数据来自后端，优先使用后端返回的业务唯一标识（比如item.id），比shortid生成的更可靠。

方式二：渲染时动态生成key #

这种方案存在严重的性能和状态问题，非常不建议使用：

• 每次重渲染都会生成新key：shortid.generate()在每次map执行时都会生成全新的字符串，React会把每个列表项都判定为“新元素”，进而销毁旧组件、创建新组件。哪怕数组内容完全没变，组件也会被重新渲染一遍，这会带来巨大的性能开销，数组元素越多越明显。
• 组件状态丢失：如果列表项包含状态，每次重渲染都会重置状态，用户体验会完全崩溃（比如输入到一半的内容突然清空）。

总结建议 #

优先选择方式一，确保key的稳定性和唯一性。如果有后端提供的天然唯一标识，直接用那个；如果没有，再用shortid这类工具提前生成固定id，绝对不要在渲染时动态生成key。

内容的提问来源于stack exchange，提问作者user10336550