React之useContext 修订版本明细

源

采纳

编辑于 18天前

半兽人

React之useContext

React

React 的 `useContext` 是什么？

useContext 是 React 中的一个 Hook（钩子），它允许你在函数组件中访问 Context（上下文）的值。Context 是 React 提供的一种机制，用于在组件树中共享数据（比如状态、函数或配置），而无需通过每一层组件手动传递 props。useContext 简化了这种数据访问方式，非常适合处理全局数据，例如主题、用户认证信息或应用范围内的设置。

核心要点

Context（上下文）：React 的 Context API 让你创建一个“共享”的数据存储，组件可以直接访问这些数据，避免了“props 钻透”（prop drilling）。
useContext：React 16.8 引入的 Hook，允许函数组件“订阅”某个 Context 并读取其当前值。
使用场景：当你需要在多个不同层级的组件中访问相同的数据时（比如主题切换或用户信息），useContext 是一个理想选择。
性能注意：当 Context 的值发生变化时，所有使用 useContext 订阅该 Context 的组件都会重新渲染。

如何使用 `useContext`

以下是 useContext 的基本使用步骤和一个简单的例子：

1. 创建 Context

使用 React.createContext 创建一个 Context 对象：

import React from 'react';

// 创建一个 Context，初始值可以是任意类型
const ThemeContext = React.createContext('light'); // 默认值是 'light'

2. 提供 Context 值

使用 Provider 组件将 Context 的值提供给组件树：

import React from 'react';

const ThemeContext = React.createContext('light');

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

  return (
    // 通过 Provider 提供 theme 值给子组件
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换主题
      </button>
    </ThemeContext.Provider>
  );
}

3. 在组件中使用 `useContext`

在函数组件中使用 useContext 来访问 Context 的值：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  // 使用 useContext 获取 ThemeContext 的值
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      当前主题: {theme}
    </button>
  );
}

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

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换主题
      </button>
    </ThemeContext.Provider>
  );
}

export default App;

运行结果

初始时，按钮显示“当前主题: light”，背景为白色。
点击“切换主题”按钮后，主题变为“dark”，按钮背景变为深色。
ThemedButton 组件通过 useContext 直接获取 theme 值，无需通过 props 传递。

工作原理

创建 Context：React.createContext 返回一个 Context 对象，包含 Provider 和 Consumer（不过 Consumer 现在很少用，因为 useContext 更方便）。
提供值：Provider 组件接受一个 value 属性，将数据注入到 Context 中，所有子组件都可以访问。
消费值：useContext(ThemeContext) 返回当前 Context 的值（即 Provider 提供的 value）。如果没有 Provider，则返回默认值（'light'）。

优点

避免 props 钻透：无需一级一级传递数据。
简洁易用：与类组件中的 contextType 或 Consumer 相比，useContext 更直观。
全局状态管理：适合简单的全局状态管理场景。

缺点

性能问题：当 Context 的值变化时，所有使用 useContext 的组件都会重新渲染，即使它们只关心部分数据（可以用 use-context-selector 优化，部分渲染）。
默认值限制：如果组件树中没有 Provider，useContext 返回的是 Context 创建时的默认值，可能导致意外行为。

与 `use-context-selector` 的对比

useContext：订阅整个 Context 值，值变化时组件总是重新渲染。
use-context-selector：允许选择 Context 的某部分，只有选择的部分变化时才重新渲染，性能更优。

例如，在上面的例子中，如果用 useContext，切换 theme 时所有订阅 ThemeContext 的组件都会渲染。而用 use-context-selector，你可以只订阅 theme 的某个属性（如果 Context 值是对象）。

总结

useContext 是 React 中一个强大而简单的工具，用于在组件树中共享数据。它消除了繁琐的 props 传递，但在性能敏感的场景下可能需要结合其他工具（如 use-context-selector）来优化。

预览