核心能力 / 结构清楚,边界干净
组件拆解
组件化不是追求文件数量,而是建立稳定边界。我会从业务状态、复用范围和变化频率出发,决定哪些逻辑留在页面、哪些沉淀为组件、哪些抽成组合式函数或数据模型。
先用白话理解
这项能力到底是什么?
组件就像页面中的零件,例如按钮、订单列表或支付弹窗。组件拆解是决定每个零件负责什么。
我的判断方式
按变化原因拆分
经常一起变化的内容放在一起,变化原因不同的逻辑保持隔离,避免为了复用制造耦合。
接口小而明确
组件输入、事件和插槽保持可预测,避免把整个业务对象无约束传入。
状态归属清晰
临时交互状态留在组件,跨页面业务状态进入 Store,服务端数据遵循请求生命周期。
交付检查
落地时会确认什么
- 组件名称是否表达业务含义
- Props 是否有清晰类型和默认行为
- 加载、空、错误和禁用状态是否完整
- 复用是否真正降低维护成本
可以怎样一步步做
- 列出相对独立的业务区域
- 标记每块需要的数据和事件
- 提取真正重复且稳定的结构
- 补齐加载、空数据和失败状态
常见误区
- 把很小的标签也拆成多个文件
- 为了通用加入大量配置
- 组件直接修改不属于自己的状态
术语解释
- Props:父组件传入的数据
- 事件:组件向外通知发生了什么
- 插槽:允许外部放入自定义内容的位置