组件组合 (Component Composition)

React 课程的一部分

你做了一张带边框和阴影的卡片，看着挺不错。现在你还要用同样的卡片去包一张照片，去包一个登录表单，再去包一串评论。这时候很容易做的事，是把卡片复制三份，或者给它加上能想到的每一种内容对应的属性：title、photoUrl、formFields、comments。这两条路的尽头，都是一个谁都不愿意去碰的组件。

出路是组合：把小东西一层层嵌进去搭出大东西，让每一块都不需要了解其他块。用相框来理解这件事很合适。相框的职责就是给里面装的东西围一圈边，而它履行这个职责时，既不知道也不关心里面装的是照片、证书还是小孩的涂鸦。写得好的 React 组件就是一个相框。这一课讲的是让这件事成为可能的两套机制：children 属性，以及把共享的状态挪到组件树里正确的位置。