组件报错别光甩个“出错了”——让 AI 生成的代码也能抛出可定位的异常边界
组件异常处理不能简单抛出错误，而应将异常信息视为API契约的一部分，包含组件名、约束描述和实际值与期望值三层关键信息。需区分ContractError（调用方违反契约）和RuntimeAssertionError（组件内部缺陷），并采用层次化错误码替代文字匹配，便于程序化处理和监控聚合。错误边界组件应根据错误类型差异化展示，生产环境参数校验不可省略，这些实践能显著降低排查成本，尤其能提升AI生成代码的修正成功率。
当大模型返回的 JSON 抽风时，前端这样解析还没崩
大模型返回的 JSON 不稳定，本质是契约问题。文章提出一套前端容错解析流程：先用三道预检查拦截 Markdown 包裹、非 JSON 文本和控制字符；再按常见破损模式分层修复，如去尾逗号、转义控制字符、补全括号；最后通过 safeParse 实现逐级降级，用字段提取器捞取关键数据，确保页面不崩、核心信息可达。
让工具读懂两种接口语言：GraphQL 与 OpenAPI 自动生成文档的落地难点
GraphQL 与 REST API 文档统一的根本挑战在于两种接口哲学差异：OpenAPI 是资源视图，GraphQL 是能力视图。强行用同一种生成逻辑会导致文档残缺。可行的统一路径包括以 GraphQL 为主封装 REST、用 OpenAPI 扩展承载 GraphQL 语义，或双 schema 并存通过中间层做字段映射统一渲染。落地时需注意工具选型、参数展示区分、统一错误格式，并做好手动维护映射与示例的准备。
我们给组件 API 加了版本号，结果三年没出过 breaking change
组件库通过给每个 prop 标注语义化版本号，在类型层面实现了细粒度的契约管理。这套机制让 API 变更变得可见、可讨论，三年间在 200 多个组件的迭代中实现了零 breaking change，仅需付出少量类型定义和维护成本。
主应用和子应用抢路由？实际项目里我用这几招把冲突理清了
微前端主应用与子应用路由冲突源于双方操作同一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 同步解析或注册模式收集子组件信息。