React有很强大的组合机制，我们也建议你用组合的方式书写代码而不是和java等等思想一样用继承的方式写代码，这样你就可以将组件复用了。
在本章节，我们介绍了一些初学react的人会自然而言想到用继承去解决的问题，然后我们通过组合来解决它。
容器
诸如侧滑栏，对话框等等组件一开始并不知道它们包含了什么孩子节点，我们建议把children作为prop的一部分传递，并且将其直接输出：
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
这种方式允许其他组件将JSX嵌套的值通过children属性传递进来：
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
FancyBorder标签中的任何值都可以通过children传递给FancyBorder组件，一旦FancyBorder组件在div中渲染了传递过来的children，渲染完成的东西就被组件当作返回值输出。
上面的例子不具有普遍性，在大多是情况下你想要将自己的组件当作prop传递，在这种情况下，你可以自定义自己的属性，这个属性的值为你自己想要传递的组件，而不是使用children：
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
Contacts和Chat 这样的element在react中仅仅是一个对象，所以你可以把它们当作prop来传递。
特殊的组件
在有些时候，我们把一些组件当作另一些组件的特殊化组件，比如欢迎对话框就是对话框的一个特殊化组件。在react中，实现特殊化组件的方式是通过用props配置普通组件的方式来实现的：
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
</FancyBorder>
);
}
function WelcomeDialog() {
return (
<Dialog
title="Welcome"
message="Thank you for visiting our spacecraft!" />
);
}
也可以用类式的方式实现：
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
);
}
class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.state = {login: ''};
}
render() {
return (
<Dialog title="Mars Exploration Program"
message="How should we refer to you?">
<input value={this.state.login}
onChange={this.handleChange} />
<button onClick={this.handleSignUp}>
Sign Me Up!
</button>
</Dialog>
);
}
handleChange(e) {
this.setState({login: e.target.value});
}
handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
}
那么继承呢？？？
在Facebook中，我们使用数以千计的组件来构建我们的react应用，在工作中我们还没有找到用组合方式解决不了的问题。props和组合机制给予你在书写自定义组件时极大的方便。组件的prop的值可以是一个私有数值，element或者函数。如果你要重复使用没有UI的组件，我们建议你将其独立成一个javascript模块。这样其他组件就可以引用它当作一个函数，一个类或着一个对象，而不是继承它。
