react 官网笔记 07 组合与继承

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

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

function FancyBorder(props) {
  return (
    

      {props.children}
    
  );
}

function WelcomeDialog() {
  return (
    
      

        Welcome
      
      

        Thank you for visiting our spacecraft!
      
    
  );
}

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

function SplitPane(props) {
  return (
    

      

        {props.left}
      
      

        {props.right}
      
    
  );
}

function App() {
  return (
    
      }
      right={
        
      } />
  );
}

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

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

function Dialog(props) {
  return (
    
      

        {props.title}
      
      

        {props.message}
      
    
  );
}

function WelcomeDialog() {
  return (
    

  );
}

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