useContext

function useContext<T>(context: Context<T>): T

import { createContext, useContext } from 'react';

// ============= 1. 定义 Context 类型 =============
type Theme = 'light' | 'dark';

interface ThemeContextType {
  theme: Theme;
  setTheme: (theme: Theme) => void;
}

// ============= 2. 创建 Context =============
const ThemeContext = createContext<ThemeContextType | null>(null);

// ============= 3. 创建自定义 Hook =============
function useTheme() {
  const context = useContext(ThemeContext);

  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }

  return context;
}

// ============= 4. 创建 Provider 组件 =============
import { useState } from 'react';

interface ThemeProviderProps {
  children: React.ReactNode;
  defaultTheme?: Theme;
}

export function ThemeProvider({ children, defaultTheme = 'light' }: ThemeProviderProps) {
  const [theme, setTheme] = useState<Theme>(defaultTheme);

  const value: ThemeContextType = {
    theme,
    setTheme,
  };

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

// ============= 5. 使用 Context 的组件 =============
function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      className="px-4 py-2 rounded"
    >
      当前主题: {theme}
    </button>
  );
}

function ThemedCard() {
  const { theme } = useTheme();

  return (
    <div className={`p-4 rounded ${theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-black'}`}>
      <h3>卡片内容</h3>
      <p>当前主题: {theme}</p>
    </div>
  );
}

// ============= 6. 应用入口 =============
export default function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <div className="min-h-screen p-8">
        <ThemeSwitcher />
        <ThemedCard />
      </div>
    </ThemeProvider>
  );
}

import { createContext, useContext, useReducer, ReactNode, useMemo } from 'react';

// ============= 类型定义 =============
interface User {
  id: string;
  name: string;
  email: string;
}

interface AppState {
  user: User | null;
  theme: 'light' | 'dark';
  locale: 'zh-CN' | 'en';
  isLoading: boolean;
}

type AppAction =
  | { type: 'SET_USER'; payload: User | null }
  | { type: 'SET_THEME'; payload: 'light' | 'dark' }
  | { type: 'SET_LOCALE'; payload: 'zh-CN' | 'en' }
  | { type: 'SET_LOADING'; payload: boolean };

interface AppContextType {
  state: AppState;
  dispatch: React.Dispatch<AppAction>;
}

// ============= 创建 Context =============
const AppContext = createContext<AppContextType | null>(null);

// ============= Reducer =============
function appReducer(state: AppState, action: AppAction): AppState {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_THEME':
      return { ...state, theme: action.payload };
    case 'SET_LOCALE':
      return { ...state, locale: action.payload };
    case 'SET_LOADING':
      return { ...state, isLoading: action.payload };
    default:
      return state;
  }
}

// ============= 初始状态 =============
const initialState: AppState = {
  user: null,
  theme: 'light',
  locale: 'zh-CN',
  isLoading: false,
};

// ============= Provider 组件 =============
interface AppProviderProps {
  children: ReactNode;
}

export function AppProvider({ children }: AppProviderProps) {
  const [state, dispatch] = useReducer(appReducer, initialState);

  // ✅ 使用 useMemo 优化,避免不必要的重新渲染
  const value = useMemo(() => ({ state, dispatch }), [state]);

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

// ============= 自定义 Hooks =============
export function useAppState() {
  const context = useContext(AppContext);

  if (!context) {
    throw new Error('useAppState must be used within AppProvider');
  }

  return context.state;
}

export function useDispatch() {
  const context = useContext(AppContext);

  if (!context) {
    throw new Error('useDispatch must be used within AppProvider');
  }

  return context.dispatch;
}

// ✅ 细粒度的自定义 Hooks,只订阅需要的状态
export function useUser() {
  const state = useAppState();
  return state.user;
}

export function useTheme() {
  const state = useAppState();
  const dispatch = useDispatch();

  return {
    theme: state.theme,
    setTheme: (theme: 'light' | 'dark') => {
      dispatch({ type: 'SET_THEME', payload: theme });
    },
  };
}

// ============= 业务 Hooks =============
export function useAuth() {
  const user = useUser();
  const dispatch = useDispatch();

  const login = async (email: string, password: string) => {
    dispatch({ type: 'SET_LOADING', payload: true });

    try {
      // 模拟 API 调用
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      });

      if (!response.ok) {
        throw new Error('登录失败');
      }

      const userData: User = await response.json();
      dispatch({ type: 'SET_USER', payload: userData });
    } catch (error) {
      console.error('Login error:', error);
      throw error;
    } finally {
      dispatch({ type: 'SET_LOADING', payload: false });
    }
  };

  const logout = () => {
    dispatch({ type: 'SET_USER', payload: null });
  };

  return {
    user,
    isAuthenticated: !!user,
    isLoading: useAppState().isLoading,
    login,
    logout,
  };
}

// ============= 使用示例 =============
function LoginForm() {
  const { login, isLoading } = useAuth();

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const email = formData.get('email') as string;
    const password = formData.get('password') as string;

    try {
      await login(email, password);
      alert('登录成功!');
    } catch (error) {
      alert('登录失败,请检查用户名和密码');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-md mx-auto p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-6">登录</h2>

      <div className="mb-4">
        <label className="block text-sm font-medium mb-2">邮箱</label>
        <input
          type="email"
          name="email"
          required
          className="w-full px-3 py-2 border rounded"
          disabled={isLoading}
        />
      </div>

      <div className="mb-6">
        <label className="block text-sm font-medium mb-2">密码</label>
        <input
          type="password"
          name="password"
          required
          className="w-full px-3 py-2 border rounded"
          disabled={isLoading}
        />
      </div>

      <button
        type="submit"
        disabled={isLoading}
        className="w-full bg-blue-500 text-white py-2 rounded disabled:bg-gray-300"
      >
        {isLoading ? '登录中...' : '登录'}
      </button>
    </form>
  );
}

function UserProfile() {
  const { user, logout, isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <p>请先登录</p>;
  }

  return (
    <div className="p-6 bg-white rounded-lg shadow">
      <h2 className="text-2xl font-bold mb-4">用户信息</h2>
      <p><strong>姓名:</strong> {user?.name}</p>
      <p><strong>邮箱:</strong> {user?.email}</p>

      <button
        onClick={logout}
        className="mt-4 px-4 py-2 bg-red-500 text-white rounded"
      >
        退出登录
      </button>
    </div>
  );
}

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      className="px-4 py-2 bg-gray-200 rounded"
    >
      切换到 {theme === 'light' ? '深色' : '浅色'} 主题
    </button>
  );
}

// ============= 应用入口 =============
export default function App() {
  return (
    <AppProvider>
      <div className="min-h-screen bg-gray-50 p-8">
        <ThemeToggle />
        <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
          <LoginForm />
          <UserProfile />
        </div>
      </div>
    </AppProvider>
  );
}