React学习：组合VS继承

组合其实类似于vue的slot插槽

1.包含关系

默认插槽为props.children。eg：

// 包含关系--类似vue的插槽
function Slot(props){
    return <div>{props.children}</div>
}
ReactDOM.render(<Slot>测试简单插槽</Slot>,document.getElementById('root'))

还可以使用类似Vue的具名插槽。eg：

function SlotName(props){
    return <div>
        <div>{props.left}</div>
        <div>{props.right}</div>
    </div>
}
ReactDOM.render(<SlotName
left={<div>左插槽</div>}
right={<div>右插槽</div>}/>,document.getElementById('root'))

虽然在理解上我们可以理解为插槽类的东西在用，但是react上并没有插槽的概念，所有东西都是可以用参数进行传递。

关于继承

Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。

目前并没有发现需要使用继承的地方。