组合VS继承

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模块。这样其他组件就可以引用它当作一个函数，一个类或着一个对象，而不是继承它。