React18+TypeScript状态管理最佳实践

目录

一、核心概念与流程

1. ​​createContext 的作用​​

2. ​​useContext 的作用​​

二、在 Ant Design Pro v6 中的实现步骤

1. ​​封装 Provider 组件​​

2. ​​集成到全局布局​​

3. ​​组件中消费状态​​

三、性能优化技巧

1. ​​避免无效渲染​​

2. ​​自定义 Hook 封装​​

四、常见场景与避坑指南

1. ​​典型应用场景​​

2. ​​关键注意事项​​

五、完整案例：主题切换实现

总结

在 Ant Design Pro v6（基于 Umi 4 + React 18+）与 TypeScript 中，createContext 和 useContext 是管理跨组件状态的核心工具。以下是结合最佳实践的系统指南：

一、核心概念与流程

1. ​​createContext 的作用​​

创建上下文对象，包含 Provider（提供数据）和 Consumer（消费数据，已被 useContext 替代）。

• ​​TypeScript 强类型定义​​：避免运行时错误，明确上下文结构：

  // src/contexts/UserContext.ts
  import { createContext } from 'react';
  
  interface UserContextType {
    name: string;
    role: 'admin' | 'user';
    setUser: (user: Partial<UserContextType>) => void;
  }
  
  export const UserContext = createContext<UserContextType | null>(null);

2. ​​useContext 的作用​​

在函数组件中消费上下文值，避免逐层传递 props：

const userContext = useContext(UserContext);
if (!userContext) throw new Error('未在 Provider 内使用！');
return userContext;

二、在 Ant Design Pro v6 中的实现步骤

1. ​​封装 Provider 组件​​

在 /src/contexts 目录下创建 Provider，结合 useState 或 useReducer 管理状态：

// src/contexts/UserProvider.tsx
import { ReactNode, useState } from 'react';
import { UserContext } from './UserContext';

export default ({ children }: { children: ReactNode }) => {
  const [user, setUser] = useState({ name: '', role: 'user' });
  
  const contextValue = {
    ...user,
    setUser: (updates: Partial<UserContextType>) => 
      setUser(prev => ({ ...prev, ...updates }))
  };

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
};

2. ​​集成到全局布局​​

在 src/app.tsx 中包裹全局组件，确保所有页面可访问上下文：

// src/app.tsx
import UserProvider from '@/contexts/UserProvider';

export function rootContainer(container: ReactNode) {
  return <UserProvider>{container}</UserProvider>;
}

3. ​​组件中消费状态​​

直接通过 useContext 获取数据或更新函数：

// src/pages/Profile/index.tsx
import { UserContext } from '@/contexts/UserContext';

export default () => {
  const { name, setUser } = useContext(UserContext)!;
  
  return (
    <Button onClick={() => setUser({ name: 'Admin' })}>
      更新用户：{name}
    </Button>
  );
};

三、性能优化技巧

1. ​​避免无效渲染​​

• ​​拆分上下文​​：将频繁变更的状态（如用户输入）与静态数据（如配置）分离。

  const UserConfigContext = createContext<ConfigType>(null!);
  const UserStateContext = createContext<StateType>(null!);

• ​​缓存 value 对象​​：使用 useMemo 减少重渲染：

  const contextValue = useMemo(() => ({ user, setUser }), [user]);

2. ​​自定义 Hook 封装​​

提供类型安全提示，简化调用：

// src/hooks/useUser.ts
export default () => {
  const context = useContext(UserContext);
  if (!context) throw new Error('UserContext 未初始化');
  return context;
};

四、常见场景与避坑指南

1. ​​典型应用场景​​

• 用户身份认证状态
• 主题切换（深色/浅色模式）
• 多语言国际化（结合 umi-plugin-locale）
• 全局弹窗/通知控制

2. ​​关键注意事项​​

• ​​默认值问题​​：未包裹 Provider 时返回 createContext 的默认值，需做好错误处理。
• ​​嵌套顺序​​：内层 Provider 会覆盖外层同名 Context。
• ​​异步更新​​：在 useEffect 中更新上下文时，需考虑依赖项避免死循环。

五、完整案例：主题切换实现

// 1. 定义主题上下文
const ThemeContext = createContext<{
  theme: 'light' | 'dark';
  toggleTheme: () => void;
} | null>(null);

// 2. 创建 Provider
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
  const value = useMemo(() => ({ theme, toggleTheme }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
};

// 3. 在组件中使用
const ThemeButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext)!;
  return (
    <Button onClick={toggleTheme}>
      当前主题：{theme}
    </Button>
  );
};

总结

在 Ant Design Pro v6 + TypeScript 技术栈中：

1. ​​强类型定义​​是基础，避免空值错误；
2. ​​Provider 全局挂载​​确保跨组件共享状态；
3. ​​性能优化​​优先考虑上下文拆分与 useMemo；
4. ​​自定义 Hook​​ 提升代码复用率与可维护性。

通过上下文管理轻量级全局状态，可减少对 Redux 的依赖，保持项目简洁性。