TypeScript中结合useState使用React Context的优化方法与最佳实践

我有如下代码：

SomeContext.ts:

export interface SomeContext {
  someValue: string;
  someFunction: () => void;
}

export const defaultValue: SomeContext = {
  someValue: "",
  someFunction: () => {},
};

export const SomeContext = React.createContext<SomeContext>(defaultValue);

SomeComponent.tsx:

function SomeComponent() {
  const [someValue, setSomeValue] = useState(defaultValue.someValue);

  return (
    <SomeContext.Provider value={{ someValue, setSomeValue }}>
      {/*...*/}
    </SomeContext.Provider>
  );
}

我现在的困扰是，必须用defaultValue同时初始化上下文以及控制该上下文的状态。有没有更简洁的方式创建由状态控制的上下文？能不能一次性初始化状态与上下文？这里的最佳实践是什么？我试过不为SomeContext设置默认值，但TypeScript会发出警告。

方案一：封装自定义Provider与Hook（推荐） #

把上下文的创建、状态管理逻辑全部封装到同一个文件里，彻底消除对defaultValue的重复依赖，同时保证类型安全。

修改后的SomeContext.ts:

import React, { createContext, useState, useContext, ReactNode } from 'react';

// 调整接口，直接用React的SetState类型，更准确
export interface SomeContext {
  someValue: string;
  setSomeValue: React.Dispatch<React.SetStateAction<string>>;
}

// 用null作为默认值，后续通过自定义hook限制使用范围
const SomeContext = createContext<SomeContext | null>(null);

// 封装Provider组件，内部直接管理状态
export function SomeContextProvider({ children }: { children: ReactNode }) {
  // 直接在这里初始化状态，无需外部defaultValue
  const [someValue, setSomeValue] = useState("");
  
  return (
    <SomeContext.Provider value={{ someValue, setSomeValue }}>
      {children}
    </SomeContext.Provider>
  );
}

// 自定义Hook，强制要求必须在Provider内使用，否则抛出错误
export function useSomeContext() {
  const context = useContext(SomeContext);
  if (!context) {
    throw new Error('useSomeContext 必须在 SomeContextProvider 内部使用');
  }
  return context;
}

使用时的SomeComponent.tsx:

import { SomeContextProvider } from './SomeContext';

function SomeComponent() {
  // 无需再手动管理状态，直接用Provider包裹子组件即可
  return (
    <SomeContextProvider>
      {/* 子组件可以通过 useSomeContext() 获取状态和更新方法 */}
    </SomeContextProvider>
  );
}

这种方式的优势：

• 状态与上下文逻辑内聚，代码更易维护
• 避免了重复定义defaultValue的冗余
• 通过自定义Hook确保类型安全，不会出现意外的undefined或空值

方案二：类型断言跳过默认值（不推荐） #

如果只是想快速消除TypeScript警告，可以用类型断言跳过默认值的定义，但这种方式有运行时风险——如果组件意外在Provider外使用上下文，会拿到无效值导致报错。

export const SomeContext = createContext<SomeContext>({} as SomeContext);

最佳实践总结 #

1. 优先选择封装Provider+自定义Hook的模式：这是React生态中管理上下文状态的标准做法，兼顾简洁性与安全性
2. 不要省略默认值或随意使用类型断言：除非你能确保所有使用上下文的组件都在Provider范围内，否则容易引入难以排查的运行时错误
3. 上下文接口与状态逻辑放在同一文件：让相关代码集中，便于后续修改和扩展

内容的提问来源于stack exchange，提问作者Laczkó Örs