我们给组件 API 加了版本号，结果三年没出过 breaking change
组件库通过给每个 prop 标注语义化版本号，在类型层面实现了细粒度的契约管理。这套机制让 API 变更变得可见、可讨论，三年间在 200 多个组件的迭代中实现了零 breaking change，仅需付出少量类型定义和维护成本。
分类: 前端实战
共 40 篇文章
主应用和子应用抢路由？实际项目里我用这几招把冲突理清了
微前端主应用与子应用路由冲突源于双方操作同一URL。解决核心是划定职责边界，各管各的路径前缀。文章按推荐度列出五种方案：prefix硬隔离、子应用改用memory路由、主应用404兜底手动加载、路由守卫放行、URL参数传递路由信息，并给出选型建议与常见问题处理。
别让整个组件库都打进包里——从 entry 出口设计开始做 Tree Shaking
组件库 Tree Shaking 失效的根源在于入口文件采用全量导出模式，迫使打包工具加载所有模块。解决方案是将入口拆到组件粒度，为每个组件建立独立入口，配合 package.json 的 exports map 提供友好路径。同时需正确配置 sideEffects 数组标记 CSS 等有副作用文件，避免样式丢失。构建时保持文件结构输出而非单一 bundle，并通过 stats 分析验证优化效果。
高阶组件还有人用吗？我翻了几个流行库的源码，发现 Render Props 也没死透
React 社区常认为 Hooks 已取代高阶组件和 Render Props，但 2024 年的流行库源码显示它们仍在特定场景不可替代。HOC 能深度介入渲染管线，实现虚拟滚动等 hooks 无法触及的控制；Render Props 在需要运行时动态组合子树时更灵活，避免 props drilling。两者虽有静态组合、回调地狱和性能陷阱等代价，但在渲染劫持、动态布局等场景仍是唯一解法。决策原则是：默认用 hooks，只在它触及不到的地方考虑替代方案。
搞了半天性能监控，FCP、LCP、TTI 到底哪个才是用户真正能感知到的“卡”？
FCP、LCP、TTI 等传统加载指标常被误读，用户真正感知的“卡”往往源于指标间的时间差。LCP 最接近直觉但存在元素漂移问题，TTI 过于实验室化且难以反映真实交互。INP 能捕捉最差交互延迟，是衡量运行时卡顿的关键，而加载阶段仍需关注 LCP 的 P75 值及子部分分解。两者互补，不可偏废。
同一个组件既要受控又要非受控？我写了个双模式开关，还挺优雅的
一个自定义 Hook 将受控与非受控模式统一为状态机，通过判断 `value` 是否为 `undefined` 自动切换模式，内部维护镜像状态，并处理 `defaultValue` 变更重置场景，让组件无需关心自身模式，简化双模式输入框的开发。
Tabs、Select 这种复合组件，声明式组合和隐式状态共享怎么跑通的——Compound Pattern 实现拆解
复合组件解决的核心问题是“一组组件共享隐式状态”，而非 UI 渲染。通过父组件持有状态、Context 向下分发、子组件隐式消费，使用者只需声明式组合结构，无需手动传递状态。实现分三步：创建 Context 并让父组件管理状态、子组件从 Context 取值、将子组件挂载为父组件的静态属性。进阶场景如 Select 组件还需处理选项注册、键盘导航等，可通过 React.Children 同步解析或注册模式收集子组件信息。
AI 动态 UI 里的状态结构太容易失控，我整理了一套分层管理的方法
AI 动态 UI 的状态管理不能靠堆砌 useState 和 useEffect。文章提出四层状态模型：渲染状态层处理临时显示，交互状态层记录用户操作，数据状态层存放结构化业务真相，元状态层管理系统运行。层间通过事件总线通信，并针对对话分支、消息回退、工具调用等 AI 特有场景给出了具体处理方案。
翻 Vue 源码看 computed：dirty 标记怎么在副作用嵌套时保持缓存不崩
Vue 的 `computed` 惰性求值并非延迟执行，而是通过 `_dirty` 标记实现“不读不算”。首次访问 `.value` 才触发 getter，之后依赖不变则直接返回缓存。依赖变化时，scheduler 仅将 `_dirty` 置为 `true` 并通知外部，不主动计算。嵌套场景下，信号沿依赖链传递脏标记，最终由消费者反向拉动整条链路重新求值。Vue 3.4 通过 `_dirtyLevel` 和依赖键级追踪，确保复杂分支下依赖收集的正确性，防止缓存崩溃。
三种组件库主题方案在生产环境跑了半年，CSS 变量、CSS-in-JS 和 Tailwind 各自的坑和甜头
组件库主题系统的三种方案——CSS变量、CSS-in-JS和Tailwind——在生产环境并行运行半年后，结论是：没有银弹，只有场景适配。CSS变量运行时灵活性高但缺乏类型约束，命名拼写错误和语义污染是主要痛点。CSS-in-JS提供完整的TypeScript类型安全和逻辑推导能力，但运行时样式重计算带来性能开销，SSR场景下样式注入顺序也需精细控制。Tailwind构建期主题几乎零运行时成本，包体积小，但无法支持运行时动态切换主题，且设计token维护成本高。最终决策需看主题变化时机和值复杂度，三者也可分层混用。