React 的 Context API

React 的 Context API 是 React 提供的一种用于在组件树中共享数据的机制，可以让我们不需要通过 props 一层层地传递数据，避免了在深层嵌套的组件中逐级传递相同的数据

Context API 的核心概念

1. Context：

   • Context 是 React 提供的对象，它可以在整个应用中传递数据，不需要显式地通过每个组件传递 props。
   • Context 包含 Provider 和 Consumer，这两者是使用 Context 的主要方式。

2. Provider：

   • Provider 是 Context 对象的一个组件，它提供一个上下文（context）值，供下级组件使用。Provider 需要接受一个 value 属性，传递给下层的组件。

3. Consumer：

   • Consumer 是用于访问由 Provider 提供的 context 值的组件。通过 Consumer 组件，你可以订阅 context 的变化。

如何使用 Context API？

以下是一个简单的例子，展示了如何使用 Context API 在 React 中共享数据。

1. 创建 Context

首先，我们需要使用 React.createContext 来创建一个 Context 对象。

import React, { createContext, useState } from 'react';
// 创建一个 Context 对象
const ThemeContext = createContext();

2. 使用 Provider 传递数据

通过 ThemeContext.Provider 组件包裹需要访问该上下文数据的组件，并传递 value 属性。

function App() {
  const [theme, setTheme] = useState('light');

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

  return (
    // 通过 Provider 传递 theme 数据
    <ThemeContext.Provider value={theme}>
      <div>
        <button onClick={toggleTheme}>Toggle Theme</button>
        <ThemedComponent />
      </div>
    </ThemeContext.Provider>
  );
}

3.使用 Consumer 或useContext获取数据

在子组件中，我们可以使用 ThemeContext.Consumer 来访问 value 中的内容。

function ThemedComponent() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
          <p>The current theme is {theme}</p>
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

从 React 16.8 开始，useContext Hook 提供了更简便的方式来访问 Context 数据，不再需要使用 Consumer 组件。

import React, { useContext } from 'react';

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>The current theme is {theme}</p>
    </div>
  );
}