react实现字典项

在 React 中实现字典项

使用 useState 或 useReducer 管理字典状态
通过状态钩子可以动态维护字典数据。例如：

const [dict, setDict] = React.useState({ key1: "value1", key2: "value2" });

字典项的增删改查操作

添加新键值对时使用展开运算符保持不可变性

setDict(prev => ({ ...prev, newKey: "newValue" }));

删除项时结合解构赋值

const { [keyToDelete]: _, ...rest } = dict;
setDict(rest);

字典的遍历渲染

使用 Object.entries() 转换为数组后映射渲染

{Object.entries(dict).map(([key, value]) => (
  <div key={key}>{key}: {value}</div>
))}

性能优化建议

对于大型字典使用 useMemo 缓存计算结果

const sortedItems = React.useMemo(
  () => Object.entries(dict).sort(),
  [dict]
);

类型安全的实现（TypeScript）

定义明确的接口类型

interface Dictionary {
  [key: string]: string | number;
}
const [dict, setDict] = React.useState<Dictionary>({});

复杂状态管理方案

当字典操作逻辑复杂时，推荐使用 useReducer

function dictReducer(state, action) {
  switch (action.type) {
    case 'ADD': return { ...state, [action.key]: action.value };
    case 'DELETE': {
      const newState = { ...state };
      delete newState[action.key];
      return newState;
    }
    default: return state;
  }
}