React Context API：单个Provider下能否有多个Consumer？嵌套Consumer是否共享上下文值？

嘿，这两个关于React Context的问题问得很精准，我来给你逐一解答：

当然可以！React Context的核心设计目标之一就是让多个组件能共享同一上下文数据——不管这些Consumer是同级排列，还是嵌套在其他子组件里，只要它们处于同一个Provider的包裹范围内，就能正常订阅并获取上下文的值。

举个实际的代码例子，一看就懂：

// 先创建一个Context
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      {/* 两个同级的Consumer组件 */}
      <ThemeContext.Consumer>
        {theme => <div>当前主题：{theme}</div>}
      </ThemeContext.Consumer>
      <ThemeContext.Consumer>
        {theme => <button style={{background: theme === 'dark' ? '#333' : '#fff', color: '#fff'}}>切换主题</button>}
      </ThemeContext.Consumer>
      
      {/* 嵌套在Header组件里的Consumer */}
      <Header />
    </ThemeContext.Provider>
  );
}

function Header() {
  return (
    <ThemeContext.Consumer>
      {theme => <h1 style={{color: theme === 'dark' ? '#fff' : '#333'}}>我的网站</h1>}
    </ThemeContext.Consumer>
  );
}

这个例子里的三个Consumer（两个同级、一个在Header里），都能拿到Provider提供的dark主题值，完全不会有问题。

如果没有在中间的层级插入新的同类型Provider，那这两个嵌套的Consumer肯定会拿到相同的上下文值。

React Context遵循「就近匹配」原则：组件会向上查找最近的同类型Provider来获取值。在Provider --> Consumer --> Consumer的结构里，两个Consumer向上找到的都是最外层的那个Provider，所以它们拿到的值是完全一致的。

看这个代码示例：

const UserContext = React.createContext(null);

function App() {
  return (
    <UserContext.Provider value={{name: 'Alice', age: 28}}>
      <UserContext.Consumer>
        {user => (
          <div>
            <p>外层Consumer获取的用户：{user.name}</p>
            {/* 嵌套在内层的Consumer */}
            <UserContext.Consumer>
              {innerUser => <p>内层Consumer获取的用户：{innerUser.name}</p>}
            </UserContext.Consumer>
          </div>
        )}
      </UserContext.Consumer>
    </UserContext.Provider>
  );
}

运行这段代码，两个Consumer都会显示Alice，因为它们共享同一个上层Provider的上下文。

当然，如果在中间插入了新的同类型Provider，那内层Consumer就会优先使用这个新Provider的值。比如：

<UserContext.Provider value={{name: 'Alice', age: 28}}>
  <UserContext.Consumer>
    {user => (
      <div>
        <p>外层Consumer获取的用户：{user.name}</p>
        {/* 插入新的Provider覆盖上下文 */}
        <UserContext.Provider value={{name: 'Bob', age: 30}}>
          <UserContext.Consumer>
            {innerUser => <p>内层Consumer获取的用户：{innerUser.name}</p>}
          </UserContext.Consumer>
        </UserContext.Provider>
      </div>
    )}
  </UserContext.Consumer>
</UserContext.Provider>

这时候外层显示Alice，内层显示Bob——因为内层Consumer找到了更近的Provider。

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