Day13 Composition(组合) vs Inheritance (继承)

一开始学习React时，常常会使用继承的方式使用Component，而React官方建议每个Componet之间使用组合的方式复用你写的程序码，这可以让你的程序避免冗长化，也易於管理。

Composition(组合)

Componsitin为多个React Component的组合，如果你在使用某个UI元件B时使用了部分UI元件A的功能时，便是一种组合的概念。用生活中的例子举例的话，我们吃的火腿蛋三明治由蛋、面包、火腿三者组合而成，而这三个食材也可以作为其他餐点去使用。

Inheritance (继承)

Inheritance为React Component之间功能、特性的衍伸，用白话描述的话继承可以说是指某类事物属於哪个类别，如手机属於通讯器材、羽球属於运动，若UI元件B继承UI元件A的话，UI元件A为base class（基础类别），而UI元件B为derived class（衍伸类别）。

Composition和Inheritance的优缺点比较

Inheritance:
优点:可以快速建立专案，继承後的元件只要针对其需求实作功能即可。
缺点:由於继承後的元件(derived class)会完全反映出原型元件base class的功能与特色，若後续专案需求有更动的话，由於继承的特性，修改完原型，继承的元件也会被改动的关系，造成程序管理不易的情况发生。

RComposition:
优点:相较於继承，拥有强大的自由度，元件可以只使用你需要用到的功能，避免不必要的功能都继承下来，让整个专案更有弹性，而之所以React可以发挥出这麽大的弹性，主要是传递外部React元素的Props应用范围很广，可以将物件、函式、React元素给下层的component使用。
缺点:刚开始学习时可能不太习惯，需要一点时间来上手。

Composition的使用方式

根据React官网，以下介绍两种方式:

1. 包含
2. 特别化

包含

包含为某一个Component是另一个Component外框的情形，常使用在Sidebar、Dialog这种不知道内容物是什麽的架构上。

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

FancyBorder这个外框提供children这个props，其中children为内容，color为自由带入的属性。
利用FacncyBorder这个外框Component，可以让其他Components将任意的资料作为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>
  );
}

上面的例子为传入单一内容作为children，Props到component的情形，下面介绍传入多个component到外框的情形，比如我们想设计一个框架，内容为<header />和<menu>组成，可以使用下面的方式组合:

function Header() {
  return <div className="header">Header</div>;
}

function Menu() {
  return <div className="menu"></div>;
}

function Layout(props) {
  return (
    <div className="Layout">
      <div className="layout-header">
        {props.header}
      </div>
      <div className="layout-menu">
        {props.menu}
      </div>
    </div>
  );
}

function App() {
  return (
    <Layout
      header={
        <Header />
      }
      menu={
        <Menu />
      } />
  );
}
ReactDOM.render(<App />,document.getElementById("app"))

特别化

特别化指的是一个Component是另一个Components的特殊情况，比方说将WelcomeDialog当作Dialog的特殊情况，这时只要让特殊Component渲染通用Component，并用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!" />
  );
}

上面的案例中便用title和message作为外部传入的props，去组合成WelcomeDialog这个特别化的Component。

总结

React Components若用Composition方式产出的话，可以避免不必要程序执行，也可以避免後续专案需求调整时整个Component的大幅变动，且React提供了许多好用的Composition功能，如props、HOC、Hooks等，加速专案的开发及後续程序的管理，让工作变得更轻松~