React/Vue 组件边界状态放对地方比封装更重要组件难维护很多时候不是 API 不够优雅而是同一份状态同时存在 props、本地 state 和全局 store。先确定谁拥有状态再谈抽象。受控状态只保留一个来源父组件保存业务值子组件通过回调提出变更临时展开、hover 等展示状态留在局部。由 props 推导出的值尽量在渲染时计算不再复制一份。组件接口要表达意图事件名说明发生了什么不暴露内部 DOM 操作。异步副作用放在明确边界并在卸载或参数变化时取消。键盘操作和 label 一起验收。空数据、加载和失败状态都有出口。性能优化先用 Profiler 找重渲染。用例比抽象层数更能说明设计为受控、只读和错误三类场景写用例。组件能在这些场景保持同一状态语义才值得继续复用。可维护组件不是把逻辑藏得更深而是让状态流向一眼能看明白。原稿中的最小片段type SearchProps { value: string; onChange(value: string): void };这段片段保留原样只用于说明接口形态接入项目时仍要补齐类型、错误和测试。