react中高阶组件

react高阶组件深刻理解、做用以及应用

本文主要以通俗易懂的语言表达本身对高阶组件的一些看法，但愿你们多多提问

高阶组件深刻理解

• 高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。新的组件使用传入的组件做为子组件。
• 首先根据定义咱们明白它就是一个函数，并且它必须有返回值，返回值是一个组件，固然这里咱们高阶组件能够嵌套（这里是一篇入门的文章，以后我会更新高阶组件多层嵌套）

高阶组件的做用

一直以来咱们都是看到新的知识都是一直学习，一直看官方文档，没有静下心来想想到底为何这个新知识可以在这个时候出现？为何它刚出现就这么火？它到底在什么状况下用？它能解决什么问题……等等这一系列的问题

• 我第一次见到这个词是在redux中解读connect组件时，看到这个词，官方文档也有具体说明我的推荐到这里去看，比官方文档，解释的更好
• 其实高阶组件就是把公用的一些部分提出来，把修改的部分以参数的形势传进去，在这里可能有人会说这那需用什么高阶组件，我本身封装一个组件也能够达到一样的效果，简单的组件在这里你可能经过封装来实现，可是我举两个例子你们在想一下怎么经过组建封装来实现：一、antd组件的form组件，二、咱们在redux中组件顶部写一行代码@connect以后就能够在组件中经过this.props访问store中的数据和一些修改数据的方法
• 这里也许也会有一些大牛说我能够实现，可是大牛毕竟比较少，可能许多程序员在心理都会以为本身是大牛，在这里我能够告你们一个检测本身实力的方法：就是没事的时候把创建投一下阿里或者是京东，而后去面试一下，我敢保证许多人就会现行；

高阶组件的用处

• 说了那么多废话，说点有用的吧，高阶组件通常用在那些地方呢
• 咱们从一个实际问题来理解并学习高阶组件：有相似的几个组件可是组件内部只有少部分是不一样的，它们身上都还有一些公用的方法，而且这些少部分组件组件都还要调用大组件的方法或者访问它的一些数据
• 咱们来分一下：1，这几个组件的大部分样式和功能是相同的，咱们能够能够思考能不能只写一次；二、它们不一样的地方还会触发一些相同的方法；三、不一样的地方只是内部的一小部分
• 若是咱们按照组件封装的方法来实现的的话，咱们封装一个大组件，而后把不一样的小组件传进去，而后经过props把方法传到小组件，经过回调触发，可是这里有一个问题，咱们写这几个组件的时候每次都要把大组件写一遍而后把子组件嵌入进去
• 加入这里咱们采用高阶组件来实现的话，咱们只须要把公用的方法和数据写到高阶函数返回的组件中，而后把组件传进去就能够了，最后在每一个调用这个大组件的地方直接调用这个函数就能够了。

• 在上图中咱们的代码能够这样来实现

  //先写高阶组件
  export default class HigherOrderComponent(InputComponent){
      return class NewComponent extends Component{
          constructor(){
              super()
              this.state={
                  initalState:123
              }
          }
          commonFunc=()=>{
          }
          render(){
              return(
                  <InputComponent data={this.state.initialSate} fun={this.commonFnn}/>
              )
          }
      }
  }
  //再来写outerComponent
  import HigherOrderComponent from 'HigherOrderComponent';
  import MinComponent1 from 'MinComponent1';
  import MinComponent2 from 'MinComponent2';
  class OuterComponent extends Component{
      render(){
          return(
              <div>
                  {HigherOrderComponent(minComponent1)}
                  {HigherOrderComponent(minComponent2)}
              </div>
          )
      }
  }
  这样这个outerComponent就写完了,直接在这个编辑器里写的，代码可能会有如下小的错误，你们谅解

• 你们能够考虑一下这个组件加入要用咱们组件封装嵌套的方式写的话能不能也写的简单点，欢迎你们在评论区写上本身的实现方式，方便你们一块儿讨论

高阶组件的应用

• 上面一不当心连高阶组件的应用也写了，大概就是这么个过程，但愿能够对你们有一些帮助
• 下班了，看明天有时间我把那两个小组件也更新一下，咱们在小组件中能够经过this.props来访问高阶组件的方法和数据

谢谢……