Kết hợp và kế thừa

React có một mô hình kết hợp mạnh mẽ, và chúng tôi khuyến khích sử dụng kết hợp thay vì kế thừa để tái sử dụng code giữa các components .
Trong phần này, chúng ta sẽ xem xét một số vấn đề nơi mà những người mới học React thường xuyên sử dụng kế thừa, và đưa ra cách chúng ta có thể giải quyết chúng với kết hợp.

Ngăn chặn

Một số các component không biết các con của nó trước thời hạn. Điều này rất phổ biến với các components như SideBar hoặc Dialog mà đại diện chung là ‘boxes’.
Chúng tôi khuyến khích sử dụng các prop con đặc biệt để truyền các element con trực tiếp vào trong output:

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

Nó để cho các component khác truyền các component con bất kì bằng cách truyền 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>
  );
}

Bất cứ thứ gì trong thẻ JSX <FancyBorder> được truyền vào trong component FancyBorder như một prop con. Vì FancyBorder kết xuất {props.children} bên trong thẻ <div> nên các phần tử được truyền vào xuất hiện tại đầu ra cuối cùng.
Trong khi nó ít phổ biến hơn, đôi khi bạn có thể cần tới nhiều chỗ trống trong một component. Trong trường hợp này bạn có thể sử dụng quy ước của riêng mình thay vì sửa dụng 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 />
      } />
  );
}

Các React element như <Contact /> và chỉ là các object, nên bạn có thể truyền chúng như props như mọi dữ liệu khác. Cách tiếp cận này có thể nhắc nhở bạn về “slots” trong các thư viện khác nhưng không có giới hạn nào về các giấ trị bạn có thể truyền như props trong React.

Chuyên ngành

Đôi khi bạn nghĩ về các component như là “trường hợp đặc biệt” của các component khác. Ví dụ, bạn có thể nói WelcomeDialog là một trường hợp đặc biệt của Dialog.
Trong React, nó cũng có thể đạt được bằng cách kết hợp, nơi các component “đặc biệt” kết xuất một component chung và cấu hình nó với 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!" />  );
}

Kết hợp thực hiện tương đối tốt cho các component được khai báo bằng class:

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

Còn về kế thừa

Ở Facebook, chúng tôi sử dụng React trong hàng ngàn các component, và chúng tôi không thấy các trường hợp mà được khuyến khích tạo ra các hệ thống phân cấp component.
Props và kế thừa mang lại sự linh hoạt mà bạn cần để tùy chỉnh component và hành vi một cách rõ ràng và an toàn. Nhờ rằng các component có thể chấp nhận không giới hạn các props, bao gồm các giá trị nguyên thủy , các React element hoặc function.
Nếu bạn muốn tái sử dụng các chức năng không liên quan tới giao diện người dùng giữa các component, chúng tôi khuyến khích nên tách biệt nó ra những module Javascript riêng. Các component có thể import nó và sử dụng function, object, hoặc một class, mà không phải mở rộng nó