组合 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>
);
}
特殊实例
组件是其他组件的特殊实例。
类比到面向对象编程中的类和对象之间的关系,可能比较好理解一点吧,组件就像是类,而每一个被调用的组件就是被实例化了的对象。
继承
官方是说组件复用就够了,不需要使用继承。