引言

在 React 应用中，状态管理是一个常见的需求。React 提供了多种方式来管理状态，其中 useContext 是一种简单且高效的方式，特别适用于全局状态的管理。本文将通过一个具体的例子——实现主题切换功能，来详细介绍如何使用 useContext。

项目结构

我们的项目结构如下：

src/
├── App.tsx
└── components/└── useContext/├── Child.tsx├── Parent.tsx├── Test.tsx└── ThemeContext.tsx

创建上下文

首先，我们需要创建一个上下文（Context），用于在整个应用中共享主题状态和更新主题的方法。

ThemeContext.tsx

// src/components/useContext/ThemeContext.tsx
import { createContext, useContext, useState } from 'react';interface ThemeContextType {theme: string;setTheme: (theme: string) => void;
}export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);export function useTheme() {const context = useContext(ThemeContext);if (!context) {throw new Error('useTheme must be used within a ThemeContext.Provider');}return context;
}

在这个文件中，我们定义了一个 ThemeContext，并导出了一个自定义 Hook useTheme，用于在组件中访问上下文中的值。

提供上下文

接下来，在 Test.tsx 中提供上下文，并初始化主题状态。

Test.tsx

// src/components/useContext/Test.tsx
import { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import Parent from './Parent';export default function Test() {const [theme, setTheme] = useState('light');return (<ThemeContext.Provider value={{ theme, setTheme }}><Parent /></ThemeContext.Provider>);
}

在这里，我们使用 useState 初始化主题状态，并通过 ThemeContext.Provider 将状态传递给子组件。

消费上下文

现在，我们在 Parent.tsx 和 Child.tsx 中消费上下文，以实现主题切换功能。

Parent.tsx

// src/components/useContext/Parent.tsx
import { useTheme } from './ThemeContext';
import Child from './Child';export default function ParentComponent() {const { theme, setTheme } = useTheme();const styles = {width: '200px',height: '200px',background: theme === 'light' ? 'white' : 'black',color: theme === 'light' ? 'black' : 'white',};return (<div><div style={styles}><p>ParentComponent</p><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>{theme === 'light' ? '切换黑色主题' : '切换亮色主题'}</button></div><div><Child /></div></div>);
}

Child.tsx

// src/components/useContext/Child.tsx
import { useTheme } from './ThemeContext';export default function ChildComponent() {const { theme, setTheme } = useTheme();const styles = {width: '200px',height: '200px',background: theme === 'light' ? 'white' : 'black',color: theme === 'light' ? 'black' : 'white',};return (<div style={styles}><p>ChildComponent</p><button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>{theme === 'light' ? '切换黑色主题' : '切换亮色主题'}</button></div>);
}

在这两个文件中，我们使用 useTheme Hook 获取当前的主题状态和更新主题的方法，并根据主题状态动态设置样式。

应用入口

最后，在 App.tsx 中引入 Test 组件，作为应用的入口。

App.tsx

// src/App.tsx
import Test from "./components/useContext/Test";function App() {return <Test />;
}export default App;

总结

通过以上步骤，我们成功地使用 useContext 实现了一个简单的主题切换功能。useContext 提供了一种简洁的方式来共享全局状态，避免了通过多层 props 传递的状态管理问题。这种方式不仅提高了代码的可维护性，还使得状态管理更加直观和灵活。

希望这篇文章能帮助你更好地理解 useContext 的使用方法，并为你的 React 项目带来更多的灵感和便利。如果你有任何问题或建议，欢迎留言交流！