具有Typescript泛型的React上下文API

基础概念

React 上下文 API（Context API）是 React 提供的一种用于在组件树中共享数据的机制，避免了通过 props 层层传递数据的繁琐。Typescript 泛型（Generics）则是一种允许在定义类、接口或函数时使用类型参数的技术，使得这些结构可以处理多种数据类型。

将两者结合使用，可以在 React 应用中创建更加灵活和可复用的上下文，同时保持类型安全。

类型

在 React 中使用 Typescript 泛型定义上下文通常涉及以下类型：

React.Context<T>：创建一个泛型上下文，其中 T 是上下文提供的数据类型。
React.Provider<T>：提供上下文的组件，同样使用泛型 T。
React.Consumer<T> 或 useContext<T>：消费上下文的组件或 Hook，也使用泛型 T。

应用场景

当多个组件需要访问相同的数据，且这些数据不需要通过 props 层层传递时，可以使用带有泛型的 React 上下文 API。例如：

主题切换（Theme Switching）
用户认证状态（User Authentication State）
国际化（Internationalization）

示例代码

以下是一个简单的示例，展示如何使用带有泛型的 React 上下文 API 来管理主题：

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

// 定义主题类型
interface Theme {
  backgroundColor: string;
  color: string;
}

// 创建一个泛型上下文
const ThemeContext = createContext<Theme | undefined>(undefined);

// 提供上下文的组件
const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setTheme] = useState<Theme>({
    backgroundColor: 'black',
    color: 'white',
  });

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

// 消费上下文的组件
const ThemedButton: React.FC = () => {
  const theme = useContext(ThemeContext);

  if (!theme) {
    throw new Error('useContext was called without a Provider');
  }

  return (
    <button style={{ backgroundColor: theme.backgroundColor, color: theme.color }}>
      Click me
    </button>
  );
};

// 应用入口
const App: React.FC = () => {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
};

export default App;