React组合概念

React组合

认识组合

·····实现组件间的代码重用（即也就是减少代码量，跟用原型链继承一样，但我们不用继承而用组合），用以代替继承。

用组合解决问题

有关包含关系的问题

有些组件无法提前知道它子组件的内容

解决思路：就是将这些组件用一个特殊的 children props 来将它们的子组件传递到渲染结果中：

function One(props) {
 return (
    <div>{props.children}</div>
    //特殊的children props
  );
}

function Two(props) {
  return (
  //这使别的组件可以通过JSX嵌套，来将任意组件作为子组件来传递给他们
  <One>
      <div>Hello</div>
      <div>World</div>
  </One>
);
}

特例关系问题

有些时候，我们可以将一些组件看成其它组件的实例：

function One(props) {
   return (
     <div> {props.left} </div>
     <div> {props.right} </div>
   );
}
function Two(porps) {
 return(
   <One left="hello"
        right = "world" />
);
}

Two 就可以说为 One 的特殊实例