createContext 和 useContext 是 React 中用于状态管理和跨组件通信的强大工具。它们适用于需要在组件树中共享状态、功能或配置的场景，而不需要通过 props 逐层传递这些数据。以下是它们的典型使用场景和具体示例。

典型使用场景

1. 主题管理（Theme Management）：
2. 在应用中实现主题切换（如从浅色模式切换到深色模式）。
3. 用户认证（User Authentication）：
4. 管理用户的登录状态、用户信息等。
5. 全局状态管理（Global State Management）：
6. 管理跨多个组件共享的状态，如购物车状态、应用语言设置等。
7. 配置和设置（Configuration and Settings）：
8. 共享应用的全局配置，如 API 基础 URL、多语言支持等。
9. 全局事件处理（Global Event Handling）：
10. 实现全局的事件处理，如通知系统、全局错误处理等。

示例

1. 主题管理

创建上下文

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


const ThemeContext = createContext();


const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');


  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };


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


export { ThemeProvider, ThemeContext };

消费上下文

import React, { useContext } from 'react';
import { ThemeProvider, ThemeContext } from './ThemeContext';


const ThemeSwitcher = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);


  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>当前主题: {theme}</p>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
};


const App = () => (
  <ThemeProvider>
    <ThemeSwitcher />
  </ThemeProvider>
);


export default App;

2. 用户认证

创建上下文

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


const AuthContext = createContext();


const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);


  const login = (userData) => {
    setUser(userData);
  };


  const logout = () => {
    setUser(null);
  };


  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};


export { AuthProvider, AuthContext };

消费上下文

import React, { useContext } from 'react';
import { AuthProvider, AuthContext } from './AuthContext';


const UserProfile = () => {
  const { user, logout } = useContext(AuthContext);


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


  return (
    <div>
      <p>欢迎, {user.name}</p>
      <button onClick={logout}>登出</button>
    </div>
  );
};


const Login = () => {
  const { login } = useContext(AuthContext);


  const handleLogin = () => {
    const userData = { name: '张三' }; // 模拟用户数据
    login(userData);
  };


  return <button onClick={handleLogin}>登录</button>;
};


const App = () => (
  <AuthProvider>
    <UserProfile />
    <Login />
  </AuthProvider>
);


export default App;

总结

• createContext：用于创建一个上下文对象，其提供者 Provider 组件用于将上下文值传递给子组件。
• useContext：用于在函数组件中访问上下文值，简化了在组件树中共享数据的过程。

通过这些工具，开发者可以在应用中轻松实现状态的集中管理和跨组件通信，从而提高代码的可维护性和可读性。

另附一个简单理解的示例：

创建上下文

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

// 创建一个上下文
const CounterContext = createContext();

const CounterProvider = ({ children }) => {
 const [count, setCount] = useState(0);

 // 增加计数器的函数
 const increment = () => setCount(count + 1);

 // 减少计数器的函数
 const decrement = () => setCount(count - 1);

 return (
  // 使用 Provider 包裹子组件，并提供上下文值
  <CounterContext.Provider value={{ count, increment, decrement }}>
   {children}
  </CounterContext.Provider>
 );
};

export { CounterProvider, CounterContext };

引用上下文

import React, { useContext } from 'react';
import { CounterProvider, CounterContext } from './CounterContext';

// 创建一个消费上下文的组件
const Counter = () => {
 const { count, increment, decrement } = useContext(CounterContext);

 return (
  <div>
   <p>当前计数: {count}</p>
   <button onClick={increment}>增加</button>
   <button onClick={decrement}>减少</button>
  </div>
 );
};

// 使用提供者组件包裹应用
const App = () => (
 <CounterProvider>
  <Counter />
 </CounterProvider>
);

export default App;