跨层级通信（Context API）

在 React 中，当多个组件之间需要共享数据或状态时，通常会通过 props 层层传递。但是，在组件层级较深的应用中，使用 props 传递数据会变得繁琐且难以维护。React 提供了 Context API，它允许我们跨越多层组件，直接共享数据，从而避免了深层传递 props 的问题。

Context API 提供了一种全局化的状态管理机制，能够让组件树中的任何层级的组件都能访问到共享的数据。

本章将介绍如何使用 Context API 进行跨层级通信，涵盖创建 Context、使用 Provider 和 Consumer、以及在现代 React 中使用 useContext 来简化代码。

1. Context API 基本概念

Context 是 React 提供的一种机制，它使得数据能够在组件树中传递，而无需通过 props 一层层地传递。

Context 主要由两个部分组成：

  • Context.Provider：提供数据的组件。通过 value 属性传递数据。
  • Context.Consumer：接收数据的组件。使用 render 属性来获取 value。

1.1 创建 Context

首先，我们需要创建一个 Context 对象：

import React, { createContext } from 'react';

// 创建一个 Context 对象
const MyContext = createContext();

2. 使用 Context.Provider 提供数据

Provider 是 Context 的一个重要组成部分，它通过 value 属性将数据传递给子孙组件。所有使用该 Context 的组件都可以访问到 Provider 传递的 value。

2.1 在父组件中使用 Provider

import React, { createContext } from 'react';

// 创建 Context 对象
const MyContext = createContext();

function Parent() {
  const value = "Hello from Parent";

  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  return <Grandchild />;
}

function Grandchild() {
  return <GreatGrandchild />;
}

function GreatGrandchild() {
  return <p>I'm a great-grandchild</p>;
}

export default Parent;

说明：

  • 在 Parent 组件中，使用 MyContext.Provider 提供数据 value。
  • 所有嵌套的子组件，如 Child、Grandchild 和 GreatGrandchild，都可以访问 value。

3. 使用 Context.Consumer 获取数据

传统的做法是通过 Context.Consumer 组件来获取由 Provider 提供的数据。Consumer 需要一个函数作为子组件，函数接收 value 并返回渲染内容。

3.1 使用 Context.Consumer 获取数据

import React, { createContext } from 'react';

// 创建 Context 对象
const MyContext = createContext();

function Parent() {
  const value = "Hello from Parent";

  return (
    <MyContext.Provider value={value}>
      <MyComponent />
    </MyContext.Provider>
  );
}

function MyComponent() {
  return (
    <MyContext.Consumer>
      {value => <p>Received value: {value}</p>}
    </MyContext.Consumer>
  );
}

export default Parent;

说明：

  • MyContext.Consumer 用来访问 MyContext 提供的值。
  • Consumer 接收一个函数，函数的参数是从 Provider 传递过来的 value。

4. 使用 useContext Hook 简化代码

从 React 16.8 开始，React 引入了 Hook。useContext 是一个简化获取 Context 数据的 Hook，能够直接返回 Context 中的 value，避免了使用 Consumer 的冗余代码。

4.1 使用 useContext 获取数据

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

// 创建 Context 对象
const MyContext = createContext();

function Parent() {
  const value = "Hello from Parent";

  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const value = useContext(MyContext);
  
  return <p>Received value: {value}</p>;
}

export default Parent;

说明：

  • useContext(MyContext) 直接返回 MyContext 提供的 value，比使用 Consumer 更简洁。
  • 通过 useContext，我们可以在任何函数组件中方便地获取 Context 的值。

5. 动态更新 Context 数据

Context 的 value 可以是动态的，通常情况下，我们会将它与组件的状态结合使用，这样就能实现跨组件的状态共享。

5.1 使用动态值更新 Context

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

// 创建 Context 对象
const MyContext = createContext();

function Parent() {
  const [message, setMessage] = useState("Hello from Parent");

  return (
    <MyContext.Provider value={message}>
      <button onClick={() => setMessage("Updated message!")}>Change Message</button>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const message = useContext(MyContext);
  
  return <p>Received message: {message}</p>;
}

export default Parent;

说明：

  • 使用 useState 管理 message，并将其作为 value 传递给 Provider。
  • 当父组件的 message 更新时，所有使用 useContext 的子组件也会自动获取到新的值。

6. 使用 Context 进行跨层级通信

Context 特别适合用于在组件树中共享全局状态或配置。常见的使用场景包括：

  • 主题管理：共享当前应用的主题（如 light 或 dark 模式）。
  • 认证信息：保存当前用户的认证状态和信息。
  • 多语言支持：存储当前选择的语言并在应用中动态渲染不同语言的文本。

6.1 示例：主题切换

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

// 创建 Context 对象
const ThemeContext = createContext();

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

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

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

function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        Toggle Theme
      </button>
    </div>
  );
}

export default App;

说明：

  • ThemeContext 共享了当前的主题以及切换主题的函数。
  • 任何子组件（如 ThemedButton）都可以通过 useContext 获取和更新主题。

7. 小结

  • Context.Provider：用于提供共享的数据。
  • Context.Consumer：用于接收共享的数据，并使用回调函数渲染内容。
  • useContext：在函数组件中简化对 Context 的访问。
  • 动态更新 Context：可以将 Context 和组件的状态结合，动态更新共享数据。
  • 使用场景：Context 非常适合跨层级的全局状态管理，如主题、认证信息、语言设置等。

Context API 是 React 中一个强大的功能，它避免了多层级的 props 传递，使得跨层级通信变得简单直观。通过合理使用 Context，我们可以更好地管理应用中的共享数据，提升开发效率。

Last Updated::