前端实战

Tabs、Select 这种复合组件,声明式组合和隐式状态共享怎么跑通的——Compound Pattern 实现拆解

复合组件解决的核心问题是“一组组件共享隐式状态”,而非 UI 渲染。通过父组件持有状态、Context 向下分发、子组件隐式消费,使用者只需声明式组合结构,无需手动传递状态。实现分三步:创建 Context 并让父组件管理状态、子组件从 Context 取值、将子组件挂载为父组件的静态属性。进阶场景如 Select 组件还需处理选项注册、键盘导航等,可通过 React.Children 同步解析或注册模式收集子组件信息。

前端实战

AI 动态 UI 里的状态结构太容易失控,我整理了一套分层管理的方法

AI 动态 UI 的状态管理不能靠堆砌 useState 和 useEffect。文章提出四层状态模型:渲染状态层处理临时显示,交互状态层记录用户操作,数据状态层存放结构化业务真相,元状态层管理系统运行。层间通过事件总线通信,并针对对话分支、消息回退、工具调用等 AI 特有场景给出了具体处理方案。