组合还是继承？

React具有强大的组合模型，我们推荐使用组合来代替继承，这样可以在组件间重用代码。
在本节中，我们将考虑几个问题，遇到这些问题时，刚接触React的开发者一般会考虑使用继承，而我们将展示如何用组合来解决他们。

包含

一些组件提前不知道它的孩子。在诸如侧栏和对话框这些通用“框”中尤为常见。
我们建议这种组件使用专门的childrenprop来直接传递子元素到他们的输出：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

这使得其他组件可以通过嵌套JSX传递任意子元素给他们：

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

在CodePen上试一试
<FancyBorder>JSX标签中的所有东西都会作为childrenprop传递给FancyBorder组件。FancyBorder在<div>中渲染{props.children}，因此传入的元素将出现在最终输出中。
虽然这比较少见，但有时你还是会需要在组件中放置多个“槽位”。在这种情况下，你可以使用自己习惯来，来代替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 />
      } />
  );
}

在CodePen上试一试
诸如<Contacts />和<Chat />的React元素也是对象，所以你可以像其他数据一样作为props传递。

特殊化

有时你我们认为一些组件是其他组件的“特殊情况”。比如，我们说WelcomeDialog是Dialog的特例。
在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!" />
  );
}

在CodePen上试一试
组合对于定义成类的组件同样好使：

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}!`);
  }
}

在CodePen上试一试

那继承咋样？

在Facebook，我们在数千个组件中使用React，尚未发现有什么组件，需要我们推荐你使用继承去实现。
Props和组合提供了足够的灵活度，使得你能够以明确且安全的方法来自定义组件的外观和行为。
如果你想在组件间复用非界面功能，我们建议将它抽取到单独的JavaScript模块。组件可以导入它，然后使用需要的函数，对象或类，而不必扩展（继承）它。