第五章 React Context

什么是 React Context？

React Context 是 React 中用于在组件之间共享状态的机制。它可以帮助您避免通过层层传递属性来传递数据，而是允许您将数据在整个组件树中共享，使您的应用程序更易于维护和扩展。

简单示例：主题切换

让我们考虑一个简单的主题切换示例，用户可以在整个应用程序中切换深色和浅色主题。我们将使用 React Context 来共享主题状态。

第一步：创建 Context

首先，创建一个主题 Context，它将包含主题状态和切换主题的函数。

import React, { createContext, useContext, useState } from 'react';
​
// 创建主题 Context
const ThemeContext = createContext();
​
// 自定义 hook，用于在组件中访问主题状态和切换主题的函数
export const useTheme = () => {
  return useContext(ThemeContext);
};
​
// 提供主题状态和切换主题的 Provider 组件
export 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>
  );
};

第二步：使用 Context

现在，我们可以在任何组件中使用 useTheme 钩子来访问主题状态和切换主题的函数。

import React from 'react';
import { useTheme } from './ThemeContext';
​
const ThemeToggle = () => {
  const { theme, toggleTheme } = useTheme();
​
  return (
    <button onClick={toggleTheme}>
      Toggle Theme ({theme === 'light' ? 'Dark' : 'Light'})
    </button>
  );
};
​
export default ThemeToggle;

在上述示例中，我们使用 useTheme 钩子来获取主题状态和切换主题的函数。当用户点击按钮时，主题会切换。

第三步：整合 Context

最后，在应用程序的根组件中整合主题 Context。

import React from 'react';
import './App.css';
import { ThemeProvider } from './ThemeContext';
import ThemeToggle from './ThemeToggle';
​
function App() {
  return (
    <div className="App">
      <h1>Theme Switcher</h1>
      <ThemeProvider>
        <ThemeToggle />
        {/* 其他应用程序组件 */}
      </ThemeProvider>
    </div>
  );
}
​
export default App;

在根组件中，我们包裹了应用程序的内容在 ThemeProvider 内，这样所有的子组件都可以访问主题状态。

运行应用

现在，您可以运行应用程序并点击按钮来切换主题。这个示例演示了如何使用 React Context 来在整个应用程序中共享状态，而不需要手动传递属性。希望这个简单示例有助于您更好地理解 React Context 的基本概念。如果您需要更多帮助或有其他问题，请随时提出。