云天游的博客

理解React中的Context

最近更新：2025-09-24 | 字数总计：600 | 阅读估时：2分钟 | 阅读量：次

React Context API 简介
1. 使用 Context API 主要涉及三个步骤：
示例：创建一个主题切换器

React Context API 简介

React 的 Context API 允许您在组件树中传递数据，而无需通过每个层级手动传递 props。这对于共享那些对于许多组件来说是“全局”的数据（如主题、用户信息等）特别有用。

使用 Context API 主要涉及三个步骤：

创建 Context： 使用 React.createContext() 创建一个新的 Context 对象。
提供 Context 值： 使用 Context.Provider 组件包裹组件树的一部分，并通过 value 属性传递数据。
消费 Context 值： 使用 Context.Consumer 或 useContext 钩子在子组件中访问 Context 值。
副作用 Context 值： 使用useEffect第二个参数来响应context中值的变化。

示例：创建一个主题切换器

假设我们要创建一个允许用户在“亮”和“暗”主题之间切换的应用程序。

创建 Context：

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

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

提供 Context 值：( **需要特别关注toggleTheme和setTheme的写法和关系 )

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

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

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

消费 Context 值：

const ThemeSwitcher: React.FC = () => {
  const themeContext = useContext(ThemeContext);

  if (!themeContext) {
    throw new Error('ThemeSwitcher must be used within a ThemeProvider');
  }

  return (
    <button onClick={themeContext.toggleTheme}>
      Switch to {themeContext.theme === 'light' ? 'Dark' : 'Light'} Theme
    </button>
  );
};

副作用 Context 值：

  useEffect(() => {
    // 这里是您想要执行的副作用
    console.log(`The current theme is: ${themeContext.theme}`);

    return () => {

      // 清理工作（如果有的话）
      console.log(`Cleaning up for theme: ${themeContext.theme}`);
    };

  }, [themeContext.theme]); // 仅在 themeContext.theme 更改时运行

在应用中使用：

const App: React.FC = () => {
  return (
    <ThemeProvider>
      <div>
        <h1>Welcome to the Theme Switcher App</h1>
        <ThemeSwitcher />
      </div>
    </ThemeProvider>
  );
};

以上代码playground

在这个例子中，我们创建了一个 ThemeContext 来存储当前主题和一个方法来切换主题。ThemeProvider 组件提供了这个上下文的值，而 ThemeSwitcher 组件消费这个值来渲染一个按钮，允许用户切换主题。

这只是一个基本的例子，但它展示了如何在 TypeScript 中使用 React Context API。您可以根据需要扩展和修改这个模式，以适应更复杂的应用程序需求。

2023-12-02 该篇文章被 ling 打上标签: React tsx context 归为分类: 前端开发