React的组合   composition:

props有个特殊属性，children，组件可以通过props.children拿到所有包含在内的子元素，

当组件内有子元素时，组件属性上的children属性不生效，当组件无子元素时，属性中的children生效

function FancyBorder(props) {

  return (

    <div className={'FancyBorder FancyBorder-' + props.color}>

      {props.children}

    </div>

  );

}

function WelcomeDialog() {

  return (

    <FancyBorder color="blue" children="xxx">

      <h1 className="Dialog-title">

        Welcome

      </h1>

      <p className="Dialog-message">

        Thank you for visiting our spacecraft!

      </p>

    </FancyBorder>

  );

}

上面代码也可以将FancyBorder内的子元素写成另一个组件，然后通过属性值赋给FancyBorder组件，

如：<FancyBorder  someAttr={<SomeComponent />} />

这样FancyBorder组件中可以通过props.someAttr获取到另一个组件内容。

React的特殊化：Specialization：

组件特殊化，是指在基本组件上，通过添加不同属性，或直接添加子元素，渲染出特殊的属性。

如：车组件为基础组件，可以通过给车传props或者子元素，丰富基础组件内容，如添加*，组成火车。

不推荐使用继承

At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.

在Facebook上，我们在成千上万个组件中使用React，我们没有发现任何我们建议创建组件继承层次结构的用例。