企业官网建设流程全解析

React/Vue 组件边界：状态放对地方比封装更重要

组件难维护，很多时候不是 API 不够优雅，而是同一份状态同时存在 props、本地 state 和全局 store。先确定谁拥有状态，再谈抽象。

受控状态只保留一个来源

父组件保存业务值，子组件通过回调提出变更；临时展开、hover 等展示状态留在局部。由 props 推导出的值尽量在渲染时计算，不再复制一份。

组件接口要表达意图

事件名说明发生了什么，不暴露内部 DOM 操作。异步副作用放在明确边界，并在卸载或参数变化时取消。

• 键盘操作和 label 一起验收。
• 空数据、加载和失败状态都有出口。
• 性能优化先用 Profiler 找重渲染。

用例比抽象层数更能说明设计

为受控、只读和错误三类场景写用例。组件能在这些场景保持同一状态语义，才值得继续复用。

可维护组件不是把逻辑藏得更深，而是让状态流向一眼能看明白。

原稿中的最小片段

type SearchProps = { value: string; onChange(value: string): void };

这段片段保留原样，只用于说明接口形态；接入项目时仍要补齐类型、错误和测试。