createContext

创建 Context，以便在组件树中共享数据而不必层层传 props。

Stable

类型签名

TypeScript

function createContext<T>(defaultValue: T): Context<T>

参数与返回

项	说明
`defaultValue`	当组件没有被任何 Provider 包裹时，`useContext` 读取到的默认值。
返回值	一个 Context 对象，包含 `Provider` 与 `Consumer`（推荐使用 `useContext`）。

版本与稳定性

稳定性：稳定。
推荐搭配：useContext 读取值，必要时拆分多个 Context 控制渲染范围。

关键用法

用法 1：最小 Theme 示例

TypeScript

import { createContext, useContext } from 'react';

type Theme = 'light' | 'dark';
const ThemeContext = createContext<Theme>('light');

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>{theme}</button>;
}

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Button />
    </ThemeContext.Provider>
  );
}

用法 2：Provider value 的稳定性

TypeScript

import { createContext, useMemo, useState } from 'react';

type Auth = {
  userId: string | null;
  login: () => void;
};

const AuthContext = createContext<Auth | null>(null);

export default function App() {
  const [userId, setUserId] = useState<string | null>(null);
  const value = useMemo(
    () => ({ userId, login: () => setUserId('u_123') }),
    [userId]
  );

  return <AuthContext.Provider value={value}>{/* ... */}</AuthContext.Provider>;
}

常见坑

Provider 的 value 每次渲染都变成新对象，会导致订阅者频繁渲染。
Context 不是全局状态的万能钥匙：优先用 props/组合来保持依赖关系清晰。

类型签名

参数与返回

版本与稳定性

关键用法

用法 1：最小 Theme 示例

用法 2：Provider value 的稳定性

常见坑

相关链接