React Context的底层实现机制是怎样的？

以下是基于React 16.8+ fiber架构的Context核心实现逻辑，同时对应你的疑问逐一说明： #

核心实现逻辑 #

React Context采用上下文栈+定向订阅的组合机制实现，没有复制全量Context到子组件，也不需要每次消费时遍历父节点查找：

• 渲染阶段React会维护一个全局上下文栈：
  • 遍历到Context.Provider节点时，会把当前Provider的value压入栈中，同时更新对应Context的当前值缓存
  • 遍历完Provider的所有子节点后，会把该value弹出栈，恢复上一层级的Context值
• 消费Context的组件（使用useContext/Context.Consumer/类组件static contextType）渲染时，直接从当前上下文栈中读取对应Context的最新值，不需要向上遍历父组件
• 每个Context.Provider会维护专属的订阅者列表：所有消费了当前Provider所属Context的子组件都会被记录到列表中，当Provider的value发生变更时，React会直接定向触发列表里的消费组件重渲染，不需要整棵子树diff查找

疑问澄清 #

• ❌ Context不会被复制到每一个子组件：只有明确消费了对应Context的组件才会和Provider建立订阅关联，其余子组件不会存储任何Context相关的副本
• ❌ 不需要每次消费时遍历父组件：渲染阶段的上下文栈已经同步了当前组件层级对应的所有Context最新值，消费时直接读取缓存即可，无额外遍历开销
• ✅ 存在双层缓存机制：
  1. 渲染期上下文栈缓存了当前层级所有Context的最新值，消费时O(1)读取
  2. Provider侧的订阅者缓存，更新时只触发关联消费组件重渲染，避免无效整树更新

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