useContext 读取上下文

最后更新：2026-10-28

useContext 接收 createContext 创建的 Context 对象，返回最近上游 Provider 的 value；无 Provider 时返回默认值。它让深层组件跳过中间层级直接取数，终结「props 逐层传递」。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

const value = useContext(MyContext)
// MyContext 必须是 createContext 的返回值（对象本身）
// value 恒等于上游 <MyContext.Provider value={v}> 的 v

Context 对象	createContext 的返回值。注意传对象本身，而不是 Provider 组件。

返回值：返回当前最近的 Provider 的 value；上游无 Provider 时返回 createContext 的默认值。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

显示「当前用户：小明」；若把 Provider 的 value 改为 null，Avatar 自动变回「未登录」。

💡 提示 useContext 在组件顶层调用；value 变化时所有消费该 Context 的组件自动重渲染。

ℹ️ 说明 想让消费者也能更新数据，把 useState 的 setter 一起放进 value：{ user, setUser }。

⚠️ 注意 value 若是每次渲染新建的对象，其所有消费者都会跟着 Provider 重渲染——必要时用 useMemo 稳定引用。

更多案例整理中，敬请期待。

Q useContext 会触发重渲染吗？

A value 变化时，所有调用 useContext 读取该 Context 的组件都会重渲染；value 不变则不会。

Q 能同时用多个 Context 吗？

A 可以，每个 Context 单独调用一次 useContext 即可；也可以用组合返回对象的单一 Context 简化。

Q 为什么传的必须是 Context 对象而不是 Provider？

A useContext 依据对象身份查找对应的 Provider；传组件没有意义，React 会直接报错。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。