React中调用useContext的组件是如何获取App.js内设置的Context值的？

问题解答 #

你产生误解的核心是把「文件导入关系」和「React组件树的上下文传递逻辑」搞混了，整个流程可以拆解成两个核心点：

1. ES 模块的单例特性
   你在UserContext.js里通过createContext生成的UserContext是一个单例对象，所有导入UserContext.js的文件拿到的都是同一个Context实例，不存在App.js和index.js拿到不同UserContext的情况。

2. Context 基于组件树的就近查找规则
   Context的取值完全和文件导入无关，只和你组件在渲染树里的位置有关：

• 你在App.js里用<UserContext.Provider>把两个路由组件都包裹在了它的子节点里，也就是说Index组件渲染的时候，它上层的组件树里存在同一个UserContext对应的Provider。
• 当你在Index组件里调用useContext(UserContext)的时候，React会拿着你传入的这个Context单例，沿着当前组件的父级链向上查找，找到最近的对应Provider，直接取它的value属性值。如果没找到，才会用你createContext时传入的默认值（你这里写的是null）。

完全不存在你猜测的「全局检索所有引入UserContext的位置」的逻辑，你可以做个测试：把Index对应的Route移到<UserContext.Provider>的外面，那useContext拿到的值就会变成默认的null，哪怕App.js里还是有Provider定义也没用，因为Index不在它的子树范围内。

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