组件设计
好的组件不是越通用越好,而是在明确的业务语义下保持稳定输入和输出。基础组件负责交互原语,业务组件负责领域含义,页面组件负责数据装配。
- 组件 API 应优先表达意图,例如
variant="danger"比传入任意颜色更容易维护。 - 复杂表单、表格、编辑器等组件需要把校验、异步状态和键盘交互纳入设计范围。
- 避免把请求逻辑散落在展示组件里,数据获取层应该可替换、可测试。
状态管理
先区分状态类型:服务端状态、表单草稿、URL 状态、会话状态和纯 UI 状态。不同状态的生命周期不同,放在同一个全局 store 里会制造不必要的耦合。
URL 状态筛选、分页、搜索词,适合让页面可分享和可回退。
服务端状态适合使用缓存、失效和重试机制管理。
局部状态弹窗开关、折叠面板、临时输入应靠近使用处。
跨页状态登录身份、主题、权限摘要需要明确刷新策略。
性能预算
性能优化最怕只在上线前突击。更可靠的方式是把预算写进构建和评审:首屏关键资源、图片尺寸、第三方脚本、长任务和缓存策略都需要可观测。
目标示例:
LCP < 2.5s
INP < 200ms
首屏 JS gzip < 180KB
关键接口 P95 < 600ms
可访问性
可访问性不是额外功能,而是界面质量的一部分。按钮要能被键盘访问,表单错误要能被读屏软件感知,颜色对比度要足够,动态内容要有明确焦点管理。