巧用 React Hooks 之 useContext，实现组件间轻松通信

2023-10-03 01:23:23

引言

在 React 应用开发中，组件之间的通信至关重要，尤其是当组件深度嵌套时，实现高效的数据传递显得尤为关键。传统的 props 传递方式虽然简单直接，但当组件嵌套层级较深时，维护起来会变得非常繁琐，且容易出现混乱和错误。

何为 useContext？

React Hooks 中的 useContext 是一个强大的工具，它允许组件在不同层级之间共享数据，而无需显式地传递 props。它通过一个名为 context 的全局存储库来实现，这个存储库可以存储共享的数据，而所有处于上下文中组件都可以访问和修改这些数据。

使用 useContext 的优势

使用 useContext 有以下几个主要优势：

简化组件结构： 无需通过 props 层层传递数据，从而简化了组件结构，提高了可读性和可维护性。
提高性能： 减少了 props 传递的开销，从而提升了整体性能。
实现跨层级通信： 允许组件跨越多个层级进行通信，而无需依赖 props 传递。
避免 prop 钻取： 消除了 prop 钻取的需要，即在组件树中向上查找数据的情况。

使用 useContext 的步骤

要使用 useContext，您需要执行以下步骤：

创建 context： 使用 React.createContext() 创建一个 context，并将其作为组件的 prop。
在需要访问上下文的组件中使用 useContext Hook： 在组件中使用 useContext(context) Hook 来获取对上下文的引用。
使用 useContext 设置和获取数据： 使用 useContext 的返回对象提供的 setValue 和 getValue 方法来设置和获取共享数据。

案例演示

为了更好地理解如何使用 useContext，让我们看一个简单的示例：

创建上下文：

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

const ThemeContext = createContext();

const ThemeProvider = (props) => {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeProvider.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeProvider.Provider>
  );
};

export default ThemeProvider;

在需要访问上下文的组件中使用 useContext：

import React, { useContext } from "react";

const ComponentUsingTheme = () => {
  const context = useContext(ThemeContext);

  return <div>Current theme: {context.theme}</div>;
};

export default ComponentUsingTheme;

在这个示例中，我们创建了一个 ThemeContext，它存储了主题状态及其更新函数。我们还创建了一个 ThemeProvider 组件，该组件通过 value prop 提供了对上下文的访问权限。现在，任何嵌套在 ThemeProvider 中的组件都可以使用 useContext Hook 访问和修改 theme 状态。

深入探索