createContext 创建上下文
最后更新：2026-10-28
createContext 创建上下文
createContext 创建一个 Context 对象，用于跨层级传递数据而不必逐层写 props。它自带 Provider 组件向下广播 value，配套 useContext 读取。适合主题、语言、当前用户这类真正的全局数据。
| 分组 | 组件模式 |
|---|---|
| 类型 | API |
| 引入版本 | React 16.3 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { createContext } from 'react'
// 默认值在「上游没有 Provider」时生效
const ThemeContext = createContext('light')
<ThemeContext.Provider value="dark">
…下游所有组件都能读到 'dark'…
</ThemeContext.Provider>⚙️ 参数
| defaultValue（默认值，可选） | 下游没有匹配到 Provider 时 useContext 返回的兜底值；显式传 undefined 可强制要求必须有 Provider。 |
|---|
返回值：返回 Context 对象：自带 Provider / Consumer 组件，本身也是 useContext 的读取依据。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
页面显示「Hello!」——App 用 Provider 把 en 广播给深层组件，Greeting 没接收任何 props 也读到了它。💡 要点
💡 提示 createContext 的参数是「兜底默认值」不是「初始值」：只要上游有 Provider，就用 Provider 的 value。
ℹ️ 说明 Context 值变化会让所有消费组件重渲染，因此常把 useState 的读写一起放进 Provider 的 value。
⚠️ 注意 别把所有 props 都换成 Context——只在数据真正全局时使用，否则组件复用性和可读性下降。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q createContext 的参数是初始值吗？
A 它只在「上游没有 Provider」时作为兜底生效；有 Provider 时完全被 Provider 的 value 覆盖。
Q Provider 必须在消费组件的祖先位置吗？
A 是的。useContext 沿组件树向上找最近的 Provider；找不到才用默认值。
Q Context 和 props 怎么选？
A 两层以内能传 props 就用 props；数据要穿越多层且全局共享（主题/用户/语言）才用 Context。
