← 返回核心能力

核心能力 / 结构清楚,边界干净

组件拆解

组件化不是追求文件数量,而是建立稳定边界。我会从业务状态、复用范围和变化频率出发,决定哪些逻辑留在页面、哪些沉淀为组件、哪些抽成组合式函数或数据模型。

先用白话理解

这项能力到底是什么?

组件就像页面中的零件,例如按钮、订单列表或支付弹窗。组件拆解是决定每个零件负责什么。

我的判断方式

01

按变化原因拆分

经常一起变化的内容放在一起,变化原因不同的逻辑保持隔离,避免为了复用制造耦合。

02

接口小而明确

组件输入、事件和插槽保持可预测,避免把整个业务对象无约束传入。

03

状态归属清晰

临时交互状态留在组件,跨页面业务状态进入 Store,服务端数据遵循请求生命周期。

交付检查

落地时会确认什么

  • 组件名称是否表达业务含义
  • Props 是否有清晰类型和默认行为
  • 加载、空、错误和禁用状态是否完整
  • 复用是否真正降低维护成本

可以怎样一步步做

  1. 列出相对独立的业务区域
  2. 标记每块需要的数据和事件
  3. 提取真正重复且稳定的结构
  4. 补齐加载、空数据和失败状态

常见误区

  • 把很小的标签也拆成多个文件
  • 为了通用加入大量配置
  • 组件直接修改不属于自己的状态

术语解释

  • Props:父组件传入的数据
  • 事件:组件向外通知发生了什么
  • 插槽:允许外部放入自定义内容的位置