React Context为何存在两处默认值指定位置？

这个问题确实容易让人搞混，我来帮你拆解清楚这两个位置的本质区别和适用场景～

1. createContext()里的默认值：兜底的“安全 fallback” #

这个值的核心作用是当组件没有匹配到任何上层的Provider时，作为兜底值返回。它并不是真正的“初始值”，更像是一个备用方案：

• 比如你写了const ThemeContext = createContext('light')，如果某个组件直接调用useContext(ThemeContext)，但它的整个上层组件树里从来没有渲染过<ThemeContext.Provider>，那这个组件拿到的就是'light'。
• 很多时候开发者会把它设为null，这时候没有Provider的组件拿到null，就需要在组件内部做兜底处理（比如判断if (!theme) return <DefaultThemeComponent />）。

2. <MyContext.Provider value={value}>里的value：实际生效的“动态值” #

这才是给所有被Provider包裹的下层组件提供的有效数据，也是你业务中真正会用到的核心值：

• 它可以是静态值，但更多时候是和状态挂钩的动态值（比如你例子里用useState维护的theme），当这个值变化时，所有消费该Context的组件都会触发重新渲染。
• 只要组件在Provider的覆盖范围内，useContext拿到的就永远是这个value的值，和createContext里的默认值完全无关。

为什么需要两个位置？不同场景的需求 #

• 场景一：组件需要独立运行/测试
  如果你开发的是一个可复用的组件（比如组件库的组件），可能会被用到没有Context Provider的环境中，这时候createContext的默认值就能保证组件有一个合理的初始状态，不会直接报错或显示异常。
• 场景二：业务中动态传递状态
  绝大多数业务场景下，我们都会用Provider来传递动态变化的状态（比如主题、用户信息），这时候createContext的默认值更多是一个占位（比如null），重点完全在Provider的value上。

结合你的例子理解 #

你例子里同时在createContext('light')和Provider的value={theme}（初始值也是'light'）设置了相同的值，这其实是为了让兜底状态和初始业务状态保持一致，避免没有Provider的组件出现突兀的显示差异。但本质上两者是独立的：如果后续把theme改成'dark'，Provider覆盖的组件都会拿到'dark'，而没有被Provider包裹的组件依然会拿到createContext里的'light'。

怎么选择用哪个？ #

• 如果你的组件100%会在Provider范围内使用：createContext的默认值可以设为null或者一个无关紧要的占位，把精力放在Provider的动态value上。
• 如果你的组件可能在无Provider环境下运行：给createContext设置一个合理的默认值，保证组件能独立工作。

备注：内容来源于stack exchange，提问作者Stefanie Gauss