当前位置：首页 > article >正文

useContext Hook 的使用及规范

article 2024/12/22 10:43:17

首先 `useContext` 是什么？

useContext 是 React 提供的一个 Hook，允许函数组件订阅 React 的 Context。

有什么用？

它使得你可以在不使用 Consumer 组件的情况下访问 Context 的值。通过 useContext，你可以轻松地在多层级组件之间传递数据，避免了手动传递 props（即所谓的 prop drilling）。

怎么用？

React 的 Context API 主要用于全局状态管理，例如主题、用户认证状态或语言设置等。它由以下几个部分组成：

createContext：创建一个 Context 对象。
Provider：提供者组件，用于将上下文值传递给其子树中的所有组件。
useContext：Hook，用于在函数组件中订阅 Context，并获取当前的 Context 值。
Consumer：组件，用于在类组件或函数组件中订阅 Context（虽然现在更推荐使用 useContext）。

具体使用和规范

文件及文件夹

在这里插入图片描述

1、创建一个 Context 对象

src\pages\useContextHook\context.tsx

import { createContext, Dispatch, SetStateAction } from "react";

// 定义 Context 的类型
interface MyContextType {
  value: string;
  setValue: Dispatch<SetStateAction<string>>;
}

// 创建 Context 对象，并提供默认值（可选）
const MyContext = createContext<MyContextType>({
  value: "value",
  setValue: () => {},
});

export default MyContext;

2、提供者组件，用于将上下文值传递给其子树中的所有组件

src\pages\useContextHook\index.tsx

import React, { useState } from "react";
import MyContext from "./context";
import DateModule from "./component/DataModule"; // 子组件

const UseContextHook = () => {

  const [value, setValue] = useState("Default Value");

  return (
    <>
      <MyContext.Provider value={{ value, setValue }}>
        <div>UseContextHook</div>
        <DateModule></DateModule>
      </MyContext.Provider>
    </>
  );
};

export default UseContextHook

3、使用或修改 `useContext`

src\pages\useContextHook\component\DataModule.tsx

import React, { useContext } from "react";
import MyContext from "../context";
import { Button } from "antd";

const DateModule = () => {

  const { value, setValue } = useContext(MyContext);

  return (
    <>
      <p>{value}</p>
      <Button onClick={() => {setValue('new Value')}}>按钮</Button>
    </>
  );
};

export default DateModule;