React Context 使用总结

---

🧠 React Context 使用总结

1. 创建 Context

在 TestModalContext.tsx 中创建了一个 Context，用于跨组件层级共享数据。

export const TestModalContext = createContext<TestModalContextType | undefined>(undefined);

同时定义了接口 TestModalContextType，其中包含要共享的数据对象 myobj1。

---

2. 定义 Provider 组件

继续在 TestModalContext.tsx 中定义了一个 TestModalProvider 组件，将 myobj1 作为值传递给 Context 的 Provider。

export const TestModalProvider: React.FC<TestModalProviderProps> = ({ children, myobj1 }) => {
  return (
    <TestModalContext.Provider value={{ myobj1 }}>
      {children}
    </TestModalContext.Provider>
  );
};

这样，在其包裹的子组件树中都可以访问到 [myobj1](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\TestModalContext.tsx#L3-L3)。

---

3. 在父组件中提供数据

在 index.tsx 的 [App](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\index.tsx#L100-L301) 组件中，通过 useState 创建并管理 [myobj1](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\TestModalContext.tsx#L3-L3) 状态，并将其传入 [TestModalProvider](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\TestModalContext.tsx#L21-L27) 提供给子组件。

const [myobj1, setMyobj1] = useState({
  one: "sdlkjfslkdjf",
  two: 2,
});

return (
  <TestModalProvider myobj1={myobj1}>
    <TestModal
      visible={isTestModalVisible}
      onCancel={handleTestModalCancel}
      onOk={handleTestModalOk}
    />
  </TestModalProvider>
);

这使得 TestModal 及其内部组件无需显式 props 即可访问 [myobj1](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\TestModalContext.tsx#L3-L3)。

---

4. 子组件中消费 Context

在 TestModal.tsx 中，通过自定义 Hook useTestModalContext() 获取上下文中的 [myobj1](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\TestModalContext.tsx#L3-L3) 数据，并直接展示出来。

const { myobj1 } = useTestModalContext();

// 展示内容
<p>myobj1.one: {myobj1.one}</p>
<p>myobj1.two: {myobj1.two}</p>

---

✅ 总结：Context 的使用流程

步骤	文件	内容
1️⃣ 创建 Context	TestModalContext.tsx	使用 createContext 创建一个上下文容器
2️⃣ 创建 Provider	TestModalContext.tsx	自定义 Provider 组件，将数据注入 Context
3️⃣ 提供数据	index.tsx	在父组件中用 Provider 包裹目标组件并传入状态
4️⃣ 消费数据	TestModal.tsx	使用 useContext 钩子获取并使用共享数据

---

📌 小贴士（适合写进博客的建议）

• 适用场景：当需要多个嵌套层级共享某些状态时，使用 Context 能避免“props drilling”。
• 注意事项：
  • 不要用 Context 来替代所有 props，仅用于全局或深层共享的状态。
  • 如果 [myobj1](file://f:\my_code_2024\react-template-admin-main\src\pages\MytestA\TestModalContext.tsx#L3-L3) 是对象类型，注意避免不必要的重新渲染，可以配合 useMemo 优化。
• 扩展性：你可以向 Context 中添加更多字段，实现多个组件间共享多个状态。

---