React.js 官方资料摘记：组合 VS 继承

组合 vs 继承

包含关系

看下面的一个实例：

function OutsideComponent(props){
    return (
        <div>
            {props.children}
        </div>
    );
}

这里有一个关键字：children，这个children的作用如下：

当我们以前调用组件时，都是直接调用：<OutsideComponent />，但是其实也可以直接这样调用：

<OutsideComponent >
    <h1>组件标签内部的内容都会被传递到子组件的children中</h1>
</OutsideComponent>

children是内置的，也可以使用自定义的，但是添加人为设置：

function LeftComponent(props){
    return (
        <div>左边的内容</div>
    );
}
function RightComponent(props){
    return (
        <div>右边的内容</div>
    );
}

下面调用上面的组件：

function OutdiseComponent(props){
    return (
        <div>
            {props.left}
            {props.right}
        </div>
    );
}
function TopComponent(props){
    return (
        <div>
            <OutSideComponent left={<LeftComponent />} right={<RightComponent />} />
        </div>
    );
}

特殊实例

组件是其他组件的特殊实例。

类比到面向对象编程中的类和对象之间的关系，可能比较好理解一点吧，组件就像是类，而每一个被调用的组件就是被实例化了的对象。

继承

官方是说组件复用就够了，不需要使用继承。