如何在React JS中使用UUID添加符合稳定性要求的列表唯一key

核心原则就是UUID 生成操作绑定数据的生命周期，和渲染逻辑完全解耦，具体实现步骤如下：

1. 依赖安装 #

首先安装 uuid 工具包，TS 项目可额外安装对应类型支持：

# 安装核心包
npm install uuid
# TS 项目额外安装类型定义
npm install @types/uuid

2. Context 层数据操作时生成 UUID #

所有数组元素的 UUID 都在数据写入 Context 之前完成生成，保证每个数据对象从创建到销毁都携带唯一且固定的标识：

import { createContext, useContext, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

const ListContext = createContext();

export function ListProvider({ children }) {
  const [itemList, setItemList] = useState([]);

  // 新增单条数据时生成 UUID
  const addItem = (itemData) => {
    const newItem = {
      ...itemData,
      // 仅在数据创建时生成一次，后续不会变更
      id: uuidv4()
    };
    setItemList(prev => [...prev, newItem]);
  };

  // 批量初始化/导入数据时统一生成 UUID
  const initList = (rawDataList) => {
    const processedList = rawDataList.map(rawItem => ({
      ...rawItem,
      id: uuidv4()
    }));
    setItemList(processedList);
  };

  return (
    <ListContext.Provider value={{ itemList, addItem, initList }}>
      {children}
    </ListContext.Provider>
  );
}

// 封装自定义 Hook 方便调用
export function useList() {
  return useContext(ListContext);
}

3. 渲染层直接使用预生成的 ID 作为 Key #

渲染阶段不需要做任何额外的 UUID 生成操作，直接读取数据对象上预先生成的 id 字段即可：

import { useList } from './ListContext';

function ItemList() {
  const { itemList } = useList();

  return (
    <ul>
      {itemList.map(item => (
        // 直接使用数据层预生成的稳定 id 作为 key
        <li key={item.id}>
          {item.content}
        </li>
      ))}
    </ul>
  );
}

必须避免的错误实现 #

不要在遍历渲染的 map 方法中直接调用 uuidv4()，这种写法会导致每次组件重渲染都生成新的 key，完全失去稳定 key 的优化效果，甚至会引发组件状态丢失、重复渲染异常等问题：

// ❌ 错误写法：每次渲染都会生成新的不稳定 key
{itemList.map(item => (
  <li key={uuidv4()}>
    {item.content}
  </li>
))}

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