React中createContext()应传入什么？常见写法解析及疑问

一、写法1/2 是否等同于写法3/4？ #

答案是不等同，核心区别在于传给createContext的默认值不同——这个默认值只有当组件没有被对应Context.Provider包裹时才会生效。

• 写法1 createContext()：默认值为undefined
• 写法2 createContext(null)：默认值为null
• 写法3 createContext({})：默认值为空对象
• 写法4（修正语法后）createContext({ theme: 'light', toggleTheme: () => {} })：默认值是包含theme属性和空函数的对象

举个实际场景：如果某个子组件直接调用useContext获取值，且没有被Provider包裹，那么用写法1/2的话，当你尝试访问toggleTheme这类属性时会直接报错（因为undefined/null没有该属性）；而写法3/4不会报错，因为默认值是对象，哪怕函数是空的也能正常调用（只是不会产生实际效果）。

二、为什么写法4里的空函数能变成有效状态更新函数？ #

你看到的“空函数能修改状态”其实是个误解——createContext里的空函数只是兜底用的占位符，真正能修改状态的是Context.Provider传递的真实更新函数。

举个完整的例子：

// 第一步：创建Context，用空函数做默认值兜底
const FooBarContext = createContext({ isFooBar: false, setIsFooBar: () => {} });

// 第二步：创建Provider组件，内部用useState管理状态
function FooBarProvider({ children }) {
  // 这里的setIsFooBar是useState返回的真实更新函数
  const [isFooBar, setIsFooBar] = useState(false);
  
  // 把真实的状态和更新函数传给Provider的value
  return (
    <FooBarContext.Provider value={{ isFooBar, setIsFooBar }}>
      {children}
    </FooBarContext.Provider>
  );
}

// 第三步：子组件中使用
function ChildComponent() {
  const { isFooBar, setIsFooBar } = useContext(FooBarContext);
  // 这里调用的setIsFooBar是Provider传递的真实函数，所以能修改状态
  return <button onClick={() => setIsFooBar(!isFooBar)}>{isFooBar ? '开' : '关'}</button>;
}

简单来说：

1. createContext里的空函数只是为了防止子组件在没找到Provider时调用函数报错；
2. 子组件真正拿到的是Provider提供的、由useState/useReducer生成的真实更新函数，所以能实现状态修改。

内容的提问来源于stack exchange，提问作者Stefanie Gauss