React具有強(qiáng)大的組合模型，我們推薦使用組合來代替繼承，這樣可以在組件間重用代碼。
在本節(jié)中，我們將考慮幾個問題，遇到這些問題時，剛接觸React的開發(fā)者一般會考慮使用繼承，而我們將展示如何用組合來解決他們。

包含

一些組件提前不知道它的孩子。在諸如側(cè)欄和對話框這些通用“框”中尤為常見。
我們建議這種組件使用專門的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標(biāo)簽中的所有東西都會作為childrenprop傳遞給FancyBorder組件。FancyBorder在<div>中渲染{props.children}，因此傳入的元素將出現(xiàn)在最終輸出中。
雖然這比較少見，但有時你還是會需要在組件中放置多個“槽位”。在這種情況下，你可以使用自己習(xí)慣來，來代替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元素也是對象，所以你可以像其他數(shù)據(jù)一樣作為props傳遞。

特殊化

有時你我們認(rèn)為一些組件是其他組件的“特殊情況”。比如，我們說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，我們在數(shù)千個組件中使用React，尚未發(fā)現(xiàn)有什么組件，需要我們推薦你使用繼承去實現(xiàn)。
Props和組合提供了足夠的靈活度，使得你能夠以明確且安全的方法來自定義組件的外觀和行為。
如果你想在組件間復(fù)用非界面功能，我們建議將它抽取到單獨的JavaScript模塊。組件可以導(dǎo)入它，然后使用需要的函數(shù)，對象或類，而不必擴(kuò)展（繼承）它。