手册

React Hooks

What is a Hook? useState useEffect useContext useRef useReducer useCallback useMemo Custom Hooks

首页大前端 React React 教程

useContext

阅读3544

更新时间2025-08-20

useEffect

useRef

React 上下文

React 上下文是一种全局管理状态的方法。

它可以与 useState Hook 一起使用，比单独使用 useState 更容易在深度嵌套的组件之间共享状态。

问题

状态应该由堆栈中需要访问状态的最高父组件持有。

为了说明，我们有许多嵌套组件。堆栈顶部和底部的组件需要访问状态。

要在没有上下文的情况下执行此操作，我们需要将状态作为"道具"传递给每个嵌套组件。这称为"支柱钻孔"。

实例:

通过嵌套组件传递"props":

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </>
  );
}

function Component2({ user }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 user={user} />
    </>
  );
}

function Component3({ user }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 user={user} />
    </>
  );
}

function Component4({ user }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 user={user} />
    </>
  );
}

function Component5({ user }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

运行实例 »

即使组件 2-4 不需要状态，它们也必须将状态传递给组件 5。

解决方案

解决方案是创建上下文。

创建上下文

要创建上下文，你必须导入 createContext 并初始化它:

import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext()

接下来我们将使用 Context Provider 来包装需要状态 Context 的组件树。

上下文提供者

在 Context Provider 中包装子组件并提供状态值。

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

现在，此树中的所有组件都可以访问用户上下文。

使用 `useContext` Hook

为了在子组件中使用上下文，我们需要使用 useContext Hook 来访问它。

首先，在导入语句中包含useContext:

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

然后就可以在所有组件中访问用户上下文了:

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

完整示例

实例:

这是使用 React Context 的完整示例:

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}

function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  );
}

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);