React useContext Hook

React上下文

React Context 是一种全局管理状态的方法。

它可以与useStateHook 比使用更容易在深度嵌套的组件之间共享状态useState独自的。

问题

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

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

要在没有 Context 的情况下执行此操作，我们需要将状态作为 "props" 传递到每个嵌套组件。这称为"prop drilling"。

例子：

通过嵌套组件传递"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 的组件树。

上下文提供者

将子组件包装在上下文提供程序中并提供状态值。

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

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

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

使用`useContext`钩

为了在子组件中使用 Context，我们需要使用useContext钩。

首先，包括useContext在导入声明中：

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

然后就可以在所有组件中访问用户Context了：

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 />
    </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 />);