react 官网笔记 07 组合与继承

在react中建议使用组合来代替继承的方式构建组件.

一些组件可能无法提前知道他的子组件有哪些,比如slider,Dialog之类的,它里面的构成比较动态,可以通过props的特殊属性children在组件的外部包裹动态的子组件内容传递进组件内部渲染

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

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

上面这种方式是只有一种内部组件结构的情况,有时你可能需要动态选择要展示的内部组件方式,可以使用指定key的方式实现

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 />
      } />
  );
}

这比较像其他前端库比如vue中的shot,但是react中你定义的组i件只是一个普通的对象,因此你可以通过props传递任何组件,不受限制sd

回到标题,组合与继承的话题, 比如dialog, Dialog是一个通用的组件,如果我们需要依赖他定制一个WelcomeDialog不是应该使用继承的方式,而是在WelcomeDialog中render出Dialg

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

在react中是不建议使用继承来实现组件复用的, 通过props和组合的方式可以让你灵活的构建组件的外观和逻辑,记住通过props你可以传递任何,包括react element,原始值和方法,对于非ui的逻辑的复用,可以把它抽象到一个单独的模块,然后再组件内导入他来使用.