React 上下文：useContext 与 Provider

React 开发中，当组件层级变深时，将数据从顶层一层层传递到底层组件（即 Prop Drilling）会变得极其繁琐且难以维护。Context API 提供了一种在组件树中共享数据的方式，无需手动传递 props。

1. 理解数据流向对比

在开始编写代码之前，通过以下流程图直观理解 Props 传递与 Context 传递的区别。

Context 创建了一个全局作用域，任何被 Provider 包裹的组件都可以直接接入获取数据。

2. 创建 Context 与 Provider

第一步是建立数据源和提供者。

1. 新建一个名为 ThemeContext.js 的文件。
2. 引入 createContext 和 useState。
3. 创建一个 Context 对象。
4. 定义 ThemeProvider 组件，并在其中管理状态。
5. 返回 ThemeContext.Provider，将 value 属性设置为包含状态和更新函数的对象。

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

// 1. 创建 Context 对象
const ThemeContext = createContext();

// 2. 创建 Provider 组件
export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  // 切换主题的函数
  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  // 3. 将状态和函数打包传入 value
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 4. 导出自定义 Hook 以便快速使用（可选但推荐）
export const useTheme = () => {
  return useContext(ThemeContext);
};

3. 包裹根组件

数据源准备好后，必须将其放置在组件树的最高层级，以确保所有需要访问数据的子组件都在其覆盖范围内。

1. 打开入口文件 index.js 或 App.js。
2. 引入刚才创建的 ThemeProvider。
3. 使用 <ThemeProvider> 标签包裹整个应用根组件。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ThemeProvider } from './ThemeContext';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    {/* 包裹 App 组件 */}
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

4. 在组件中消费数据

现在可以在任何深层组件中直接读取或修改数据，无需通过父组件传递。

1. 新建一个名为 Header.js 的组件文件。
2. 引入 useTheme（或直接引入 useContext 和 ThemeContext）。
3. 调用 useTheme 获取 theme 和 toggleTheme。
4. 使用获取到的数据控制渲染逻辑。

import React from 'react';
import { useTheme } from './ThemeContext';

const Header = () => {
  // 解构出状态和函数
  const { theme, toggleTheme } = useTheme();

  // 根据主题设置样式
  const headerStyle = {
    backgroundColor: theme === 'light' ? '#ffffff' : '#333333',
    color: theme === 'light' ? '#000000' : '#ffffff',
    padding: '10px',
    textAlign: 'center',
  };

  return (
    <header style={headerStyle}>
      <h1>当前主题: {theme}</h1>
      <button onClick={toggleTheme}>
        **点击**切换主题
      </button>
    </header>
  );
};

export default Header;

5. 性能优化：拆分 Context

随着应用复杂度增加，单一的 Context 可能会导致不必要的重新渲染。如果 Context 中的某个值发生变化，所有消费该 Context 的组件都会重新渲染，即使它们只使用了 Context 中的另一部分数据。

优化方案是将读写逻辑分离。

1. 拆分原有的 Context 为两个独立的 Context：一个存状态，一个存更新函数。
2. 创建两个 Provider 并嵌套。
3. 分别导出针对不同数据的 Hook。

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

// 状态 Context
const ThemeStateContext = createContext();
// 更新函数 Context
const ThemeDispatchContext = createContext();

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

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

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

// 仅读取状态的 Hook
export const useThemeState = () => {
  return useContext(ThemeStateContext);
};

// 仅读取更新函数的 Hook
export const useThemeDispatch = () => {
  return useContext(ThemeDispatchContext);
};

使用时，组件可以按需导入。例如，一个只负责显示主题名的组件只引入 useThemeState。这样，即使 toggleTheme 被调用（虽然函数引用通常不变，但若状态变导致 Provider 重渲染），分离后的结构能提供更细粒度的控制。

以下是两种消费方式的对比：

6. 实战中的注意事项

在开发过程中，遵循以下规范可以避免常见错误。

1. 设置默认值：createContext(defaultValue) 中的默认值仅在组件未被 Provider 包裹时生效。
2. 避免在 value 中直接传入对象字面量：在 Provider 组件中，不要写成 value={{ theme, toggleTheme }}，这会在每次渲染时创建新对象，导致所有消费组件重渲染。确保将对象存储在 state 或 useMemo 中（如前面的示例所示，对象结构虽直接写在 JSX 中，但如果 Provider 父组件重渲染，这里需要小心，最好将 value 对象提取到 useMemo 中）。
3. 修正 Provider 的 value 写法（优化版）：

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

const ThemeContext = createContext();

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

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

  // 使用 useMemo 缓存 value 对象，防止因父组件重渲染导致 value 引用变化
  const value = useMemo(() => ({
    theme,
    toggleTheme
  }), [theme]);

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

4. 使用 TypeScript 时，定义清晰的 Context 类型接口，确保 value 的类型安全。