useContext Hook 的使用及规范

首先 `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;