React TypeScript上下文文件优化：如何让代码更简洁优雅？

以下是针对你的Context代码的简洁化优化方案，兼顾可读性和类型安全：

优化点说明 #

• 复用类型定义：给createContext传入泛型参数，避免重复声明类型
• 简化Props类型：使用React内置的PropsWithChildren替代手动定义children类型
• 优化状态初始值：函数式初始值避免重复创建引用类型实例
• 移除冗余封装：直接复用setSelected或简化赋值，减少不必要的函数嵌套

优化后的完整代码 #

import { createContext, useState, PropsWithChildren } from 'react';

type ToolsContextType = {
  updateSelected: (newSet: Set<string>) => void;
  selected: Set<string>;
};

// 利用泛型复用类型，初始值简化
export const ToolsContext = createContext<ToolsContextType>({
  updateSelected: () => {},
  selected: new Set(),
});

// 使用PropsWithChildren简化Provider的props类型
export const ToolsProvider = ({ children }: PropsWithChildren) => {
  // 函数式初始值，仅在首次渲染时创建Set
  const [selected, setSelected] = useState(() => new Set<string>());

  // 直接复用setSelected，保留原命名的简写方式
  const updateSelected = setSelected;

  return (
    <ToolsContext.Provider value={{ updateSelected, selected }}>
      {children}
    </ToolsContext.Provider>
  );
};

额外可选项（按需使用） #

如果不需要单独的updateSelected命名，可以直接把setSelected放入context值中，进一步简化：

// 修改类型定义
type ToolsContextType = {
  setSelected: (newSet: Set<string>) => void;
  selected: Set<string>;
};

// Context初始值对应修改
export const ToolsContext = createContext<ToolsContextType>({
  setSelected: () => {},
  selected: new Set(),
});

// Provider中直接传入setSelected
export const ToolsProvider = ({ children }: PropsWithChildren) => {
  const [selected, setSelected] = useState(() => new Set<string>());

  return (
    <ToolsContext.Provider value={{ setSelected, selected }}>
      {children}
    </ToolsContext.Provider>
  );
};

这些优化不会增加代码复杂度，反而让结构更清晰，减少重复代码，同时保持TypeScript的类型安全。

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