Context 是 React 提供的跨层级数据传递机制，用于避免 props drilling，由 createContext、Provider 和 useContext 三部分组成，需谨慎使用以防性能问题。
JavaScript 本身没有原生的 Context API，这个概念是 React 框架提供的高级特性，用于跨层级组件之间安全、高效地传递数据，避免“props drilling”（层层透传 props）。它不是浏览器或 JS 引擎的标准 API，而是 React 的内置机制。
Context 是什么？为什么需要它？
当多个嵌套组件都需要访问同一个数据（比如用户登录状态、主题色、语言偏好），如果每次都通过 props 一层层往下传，代码会变得冗长、脆弱且难以维护。Context 就是为了解决这个问题：它创建一个“数据通道”，让任意后代组件都能订阅并使用这个数据，且在数据变化时自动更新。
它由三部分组成：
-
React.createContext()：创建一个 context 对象（含
Provider和Consumer，新版推荐用useContext） - Context.Provider：包裹组件树，提供共享值（value）
- useContext() Hook：在函数组件中读取 context 值（必须在 Provider 内部调用）
基本用法：三步走
以「主题色」为例：
立即学习“Java免费学习笔记（深入）”；
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
-
创建 Context：
const ThemeContext = React.createContext(); -
用 Provider 提供值（通常放在顶层或某段子树根部）：
<ThemeContext.Provider value={{ theme: 'dark', toggle: () => {...} }}><br> <App /><br></ThemeContext.Provider> -
在任意后代组件中消费（函数组件）：
import { useContext } from 'react';<br>function Button() {<br> const { theme } = useContext(ThemeContext);<br> return <button className={theme}>点我</button>;<br>}
注意事项和常见坑
Context 不是万能的，滥用反而影响性能和可读性：
-
值变化会触发所有消费者重渲染——哪怕只改了对象里一个字段。建议拆分 context（如
UserContext、ThemeContext），或用useMemo稳定 value 引用 -
不能在条件语句或循环中调用
useContext（违反 Hook 规则） - Provider 可嵌套：内层 Provider 会覆盖外层同名 context 的 value，适合局部覆盖（如某个弹窗用浅色主题）
- 类组件可用
static contextType = MyContext或<mycontext.consumer></mycontext.consumer>，但推荐统一用 Hook
替代方案参考（非 React 场景）
如果你问的是“纯 JavaScript 中如何模拟 context 行为”，那可以借助闭包 + 模块作用域实现轻量级上下文：
// config.js<br>let currentContext = { locale: 'zh-CN', user: null };<br>export function setContext(ctx) { currentContext = { ...currentContext, ...ctx }; }<br>export function getContext() { return { ...currentContext }; }
但这只是简易状态快照，不具备 React 的响应式更新能力。真要跨组件通信，还是得依赖框架或状态库（如 Zustand、Jotai）。
基本上就这些。Context 是 React 数据流的重要拼图，用对了很省心，乱用容易埋雷。记住核心：少而精，按需提供，稳定引用。
