为何React Context需要分别在createContext和Provider组件两处设置值？

两个值的作用场景完全不同，不存在重复设置的问题 #

1. createContext传入的默认值是兜底值，仅在无对应Provider的场景下生效

当消费Context的组件，上层组件树中完全没有包裹该Context的Provider组件时，才会读取这个默认值，作用是避免Context未被提供时直接报错，适合作为全局最低优先级的 fallback 取值。
示例：

import { createContext } from 'react';
const Context = createContext('Default Value');

// 未套Provider时直接消费，拿到的是默认值
function App() {
  return <Context.Consumer>{val => <span>{val}</span>}</Context.Consumer>
  // 最终渲染内容为：Default Value
}

2. Provider的value是主动声明的子树专属值，优先级高于默认值

Provider的作用就是给包裹的子组件树单独指定Context取值，支持动态修改、多Provider嵌套覆盖，这也是Context实现跨层级状态传递的核心能力。
设计上要求Provider必须传value，是为了避免开发者误写漏写，导致子组件意外拿到兜底的默认值，出现不符合预期的表现。如果你的业务场景下子树不需要修改默认值，直接传和createContext一致的默认值即可。
示例：

function Main() {
  // 这里可以传任何动态值，比如登录态、主题配置等，子组件会实时响应变化
  const value = 'My Context Value';
  return (
    <Context.Provider value={value}>
      {/* 这里消费Context拿到的都是Provider传的value，和createContext默认值无关 */}
      <Context.Consumer>{val => <span>{val}</span>}</Context.Consumer>
      {/* 最终渲染内容为：My Context Value */}
    </Context.Provider>
  );
}

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