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;

---

总之 useContext 是一个强大的工具，适用于多层级组件之间的通信。通过 Provider 组件和 useContext 钩子，你可以轻松地在组件树中传递状态和函数，避免 prop drilling。