React 的 Context主要解决跨层级组件传值问题，即父组件的数据需要经过多层组件最终传给深层子组件。

什么是 Context

没有 Context 时：

function App {
const me = 'dark';return ;不过，}
function Parent {
return ;说起来，}
function Child {
return ;}
function GrandChild {
return 

{me}
}

数据流的观点是，App → Parent → Child → GrandChild。即使 Parent 和 Child 并不使用 me也必须把它一层层传下去。

这就是所说的 Props Drilling。说起来，

Context 正是为了解决这个痛点而生。话说回来，

. Context 使用步骤

React Context 主要 API：

createContext Provider useContext

. 第一步先：创建 Context

// ThemeContext.js
import { createContext } from "react";export const ThemeContext = createContext;// 默认值为空
// 或者带默认值
// export const ThemeContext = createContext;话说回来，

提示：如果 Provider 没有包裹。子组件会使用默认值，说起来，

. 接下来：Provider 提供数据

import { ThemeContext } from "./ThemeContext";function App {
const me = "dark";return (



);}

. 然后：子组件获取数据

import { useContext } from "react";import { ThemeContext } from "./ThemeContext";function GrandChild {
const me = useContext;return 

{me}
}

输出结果为这方面。"dark"

完整例子

import React,{ createContext,useContext,useState}from "react";const UserContext = createContext;function App{
const = useState;return(



)
}
function Home{
return
}
function Profile{
const {user,setUser} = useContext;return(
<>

{user}
<
      button onClick={=>setUser}>修改
<>
)
}

点击按钮后所有使用了 UserContext 的组件都会重新渲染，显示从 Tom 到 Jerry 的变化。

. Context 优点与痛点对照表

避免 Props Drilling

• 再看痛点。 深层子组件需要父级状态，需要在每一层手动转发 props，维护成本高；老实说，当业务 时需要在多处添加或修改 props，很容易出错。
• 优势的观点是，只需在最外层包裹一次 Provider。任何深度的子组件都能直接通过
.

全局共享状态

• 痛点的观点是，多页面、多模块需要共享同一份配置或使用者信息，单独维护每个页面的状态很繁琐。
• 优势这方面。将这些通用数据放入 Context，只需更新一次即可同步到所有订阅者。

简洁代码结构。可读性提高

• 至于痛点，大量嵌套组件导致 props 链冗长，代码可读性差；更改业务逻辑时需遍历修改多个文件。
• 优势这方面，直接使用
. 而不是一直写 {{props.xxx.xxx}}.

避免层级改动导致的连锁重构

• 至于痛点。业务新增或拆分时需要插入/删除中间容器，这会破坏原有 props 链，导致全链路重写。

. Context 缺点与对应调整建议

性能问题——所有消费方都会重新渲染

• 当 value 对象发生变化时所有使用了该 Context 的组件都会重新渲染，即使它们并未真正使用变更的数据。至于例如，

UserContent
├── Header
├── Menu
├── Profile
└── Footer

改变 user.name 后 Header、Menu、Footer 都会无意义地重渲染。话说回来，

对应调整方法

• useMemo 包装 value 对象。让其只在真正相关字段变更时更新。
• 拆分 为多个细粒度的 Context，每个只关心一部分状态。
• 仅在必要的地方使用 useCallbackReact.memo 等做进一步性能防护。

⚠️ 小结

• 优先考虑 在 与 层级关系较浅、数据变更频率低且共享范围有限的场景下使用。
• 对于 复杂、频繁更新且包含大量字段 的全局状态，请考虑 Redux Toolkit / Zustand / MobX / React‑Query 等专门状态管理库。

📚 学习资源

🚀 快速上手小练习

1️⃣ 创建一个 并提供 {"primary":"#3498db"}。2️⃣ 在 中读取 primary 并应用为背景色。3️⃣ 在页面任意位置切换颜色后全页按钮颜色随之变化，无需手动传递 prop。

完成后请提交你编写的代码片段，我们将一起点评！

---

🔗 后续学习方法

• React Hooks 内部实现 与上下文机制。
• 探索 Recoil 或 Zustand 等轻量级状态库，它们可以兼顾性能与简洁。
• 学习 React Query + Context 的组合模式，用于处理异步请求缓存与 UI 状态同步。
• 跟踪官方路线图，看未来版本是否提供更完善的全局状态支持。

---

©2026 All rights reserved.

---