组件化
组件化像把厨房工具分类收纳。每次做饭不用重新打造锅铲,而是拿出合适工具组合使用。
关键结构图
三个相似卡片合并成一个组件模板,旁边列出可变参数。
What
组件化是把重复界面和逻辑拆成可复用模块,让系统更容易维护和扩展。
组件化是一种产品和工程方法。它把界面、交互或逻辑拆成独立模块,每个模块有明确职责和输入输出。
Structure组件化 = 可复用模块 + 清晰边界 + 一处修改多处生效
When
当同一种卡片、按钮、表单或布局在多个页面反复出现时,就该考虑组件化。
How
先找重复模式,再抽出稳定结构,最后保留必要参数。不要为了抽象而抽象,只有真实复用才值得组件化。
Examples
Bricks Planet 的 related chips 可以变成一类轻量 metadata 组件,以后详情页和图谱 inspector 都能复用。
一个产品里有十种按钮样式,用户会困惑。把它们收敛为几类组件后,界面会更统一。
来源
类型:技术文档 / 行业实践
事实线:现代前端文档通常把 component 描述为可复用、可组合的 UI 或功能单元,由清晰输入和内部逻辑共同形成可维护结构。
依据:React 官方文档对 component 作为 reusable UI building block 的说明,以及 MDN Web Components 对封装、复用自定义元素的技术说明。
边界:组件化不只是把 UI 切小,还需要稳定职责、接口和复用场景;过早抽象会增加理解成本。
常见误读:不要为了“看起来工程化”强行抽组件;没有真实复用和清晰边界时,组件反而会让系统更碎。