React之Composition Vs inheritance 组合Vs继承

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，我们没有发现任何我们建议创建组件继承层次结构的用例。