从 Gemini CLI 看状态管理的架构艺术

在现代 Web 开发的宏伟殿堂中，React 如同一位技艺精湛的建筑师，而状态管理则是支撑起整座建筑的精密龙骨。当组件之间需要共享状态时，我们常常会请出 React Context 这位“信使”，让数据在组件树中自由穿梭，避免了繁琐的“道具层层钻（prop drilling）”。

然而，Context 并非只有一种用法。它像一位千面演员，可以根据剧本（应用场景）的不同，展现出截然不同的表演风格。今天，我们就将聚光灯投向 Google 的 Gemini CLI 项目，通过解剖其 UI 源码中的三个核心 Context 文件——OverflowContext.tsx、SessionContext.tsx 和 StreamingContext.tsx，来领略三种截然不同又都堪称典范的 Context 架构设计。

这不仅是一次代码的旅行，更是一场关于软件设计思想的深度对话。准备好了吗？让我们拉开帷幕。

🎭 第一副面孔：双生分离的性能管家 —— OverflowContext.tsx

想象一下，在一个复杂的仪表盘界面上，有许多卡片或文本框。当内容超出其可见区域时，我们需要一个统一的机制来追踪并响应这种“溢出”状态。OverflowContext 正是为此而生。

> 什么是“溢出状态”？
在 CSS 中，当一个元素的内容（如文字、图片）尺寸超过了其容器元素的尺寸时，就会发生内容溢出（Overflow）。OverflowContext 的作用就是在一个 React 应用中，集中管理和追踪哪些组件正处于这种“内容溢出”的状态。

📦 它的职责：精细的 UI 状态追踪

OverflowContext 的核心任务是维护一个 ID 列表，这个列表记录了当前所有处于“溢出”状态的组件。它需要提供两个基本操作：

1. 添加一个 ID：当某个组件检测到自己溢出时，调用此方法将自己的 ID 注册到全局状态中。
2. 移除一个 ID：当该组件的溢出状态消失时（例如，用户调整了窗口大小），调用此方法将其 ID 移除。

🧠 设计哲学：读写分离的艺术

初看之下，这似乎是一个简单的 useState 就能解决的问题。但 OverflowContext 的设计者显然考虑得更深。他们采用了**状态与行为分离（State and Actions Separation）**的模式，将 Context 一分为二：

1. OverflowStateContext：专门用于传递状态（即那个包含所有溢出 ID 的集合 overflowingIds）。
2. OverflowActionsContext：专门用于传递操作状态的方法（即 addOverflowingId 和 removeOverflowingId）。

// 定义两个独立的 Context
const OverflowStateContext = createContext<OverflowState | undefined>(undefined);
const OverflowActionsContext = createContext<OverflowActions | undefined>(undefined);

// 提供两个独立的 Hook
export const useOverflowState = (): OverflowState | undefined => useContext(OverflowStateContext);
export const useOverflowActions = (): OverflowActions | undefined => useContext(OverflowActionsContext);

这种设计的精妙之处在于性能优化。在 React 中，当一个 Context 的值发生变化时，所有消费（useContext）该 Context 的组件都会被重新渲染。

试想，如果我们将状态和操作方法放在同一个 Context 中：

• 一个只负责显示溢出状态的组件（消费者A）。
• 一个只负责触发状态改变的按钮（消费者B）。

当按钮被点击，addOverflowingId 被调用，overflowingIds 状态更新。这不仅会导致消费者 A 重新渲染（这是我们期望的），也会导致消费者 B 重新渲染。但消费者 B 只是一个触发器，它的外观和功能完全不依赖于 overflowingIds 的具体内容，它的重渲染是完全不必要的浪费。

通过将状态和操作分离，只关心状态的组件（如 A）消费 OverflowStateContext，而只关心操作的组件（如 B）消费 OverflowActionsContext。这样，当状态更新时，只有消费者 A 会重新渲染，消费者 B 则安然无恙。这在组件繁多、交互频繁的应用中，能有效减少不必要的渲染，提升应用性能。

🛠️ 代码实现剖析

在 OverflowProvider 组件中，这种分离思想被完美执行：

1. useState 管理核心状态：

   const [overflowingIds, setOverflowingIds] = useState(new