React 的 Context API是什么，常用来干什么？

React 的 Context API

React 的 Context API 是一种用于在组件之间共享数据的方法，允许你在组件树中传递数据，而无需通过 props 进行传递。这种方法非常适合需要在多个嵌套组件中共享状态的场景，例如管理全局主题设置、用户身份验证状态或应用配置等。

Context API 的主要应用场景

1. 状态管理：用于管理应用程序的状态，如用户登录状态、权限等。
2. 共享数据：用于在组件之间共享数据，如应用程序的配置信息、国际化数据等。
3. 状态传播：用于在组件之间传递状态，如应用程序的导航状态、页面加载状态等。

Context API 的使用步骤

1. 创建一个 Context 对象

使用 React.createContext() 方法创建一个 Context 对象。这个方法可以接受一个默认值作为参数，用于在没有 Provider 时提供给 Consumer。

javascript
import React from 'react';

const ThemeContext = React.createContext('light'); // 默认主题为'light'

2. 提供数据

使用 Provider 组件提供数据，需要将数据传递给 Context 对象。Provider 是数据的提供者，可以将数据下发给组件树中的任意层级的 Consumer。

javascript
import React, { useState } from 'react';

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

  return (
    <ThemeContext.Provider value={theme}>
      {/* 子组件 */}
    </ThemeContext.Provider>
  );
}

3. 使用数据

在组件中使用 useContext() 钩子来获取和订阅 Context 数据。useContext() 返回当前 Context 的值。

javascript
import React, { useContext } from 'react';

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

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#f0f0f0' : '#333' }}>
      {/* 内容 */}
    </div>
  );
}

优势

• 简化 props 传递：避免了层层传递 props 的繁琐过程，提高代码的可读性和维护性。
• 全局状态管理：适合用于全局状态管理，例如主题、用户信息、语言设置等。

案例：主题切换

下面是一个简单的主题切换案例：

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

// 创建 Context
const ThemeContext = React.createContext();

// 主题切换按钮组件
function ThemeButton() {
  const theme = useContext(ThemeContext);
  const setTheme = useState()[1]; // 假设有一个设置主题的函数

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

  return (
    <button onClick={toggleTheme}>
      切换主题
    </button>
  );
}

// 主应用组件
function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div style={{ backgroundColor: theme === 'light' ? '#f0f0f0' : '#333' }}>
        <ThemeButton />
      </div>
    </ThemeContext.Provider>
  );
}