Composition Patterns（组合模式）：快速入门

想象你正对着一个臃肿的“万能卡片”组件发愁——它有标题、副标题、内容、左图标、脚部按钮，甚至还有“是否高亮”等十几个控制开关。当你只想微调一下标题和图标的相对位置时，开发团队却告诉你：“这个组件写死了，改动成本很高”。

这就是典型的“组件臃肿病”。现在，让我们用组合模式作为手术刀，体验一次化繁为简的过程。

你可以找一段项目中公认最难维护、参数最多的组件代码，或者直接向 AI 描述一个复杂的 UI 需求，然后输入以下指令：

这是一个功能极其复杂、属性（Props）多到数不清的 React 组件。请帮我用“组合模式”对它进行重构，将它拆解为像乐高积木一样的子组件，让我能自由调换各部分顺序。

当你执行完指令，你会看到原本死板的单一组件变成了一组彼此配合的灵活零件。例如，原本需要输入十几个参数的 Card 组件，现在变成了类似这样的结构：

<Card>
  <Card.Header>
    <Card.Title>我的标题</Card.Title>
  </Card.Header>
  <Card.Body>这里是内容，我可以随意插入图片或文字</Card.Body>
</Card>

通过这次简单的尝试，你会发现控制权回到了使用者手中。如果你下个版本想把页脚挪到最上面，或者在标题旁边临时加一个促销标签，你再也不需要催促工程师去修改那个黑盒组件的内部逻辑。

这种“不用改底层代码就能变出无限可能”的快感，就是组合模式带给产品团队的“灵活性红利”。