19. React的高阶组件

2. React的高阶组件

• 2.1. 认识高阶函数

  • 1. 什么是高阶组件呢？
    • 在JS中都知道，也用过高阶函数;
    • 它们非常相似，所以我们可以先来回顾一下什么是高阶函数；
  • 2. 高阶函数的维基百科定义：至少满足以下条件之一：
    • 接受一个或多个函数作为输入；
    • 输出一个函数；
  • 3. Javascript中比较常见的filter、map、reduce都是高阶函数。
  • 4. 那么说明什么是高阶组件？
    • 4.1. 高阶组件的英文：Hight-Order-Components,简称HOC；
    • 4.2. 官方的定义：高阶组件是参数为组件，返回值为新组件的函数；
  • 5. 我们可以进行如下的解析：
    • 5.1. 首先，高阶组件本身不是一个组件，而是一个函数
    • 5.2. 特点：
      • 4.4.1. 接受一个组件作为它的参数
      • 4.4.2. 返回一个新的组件

• 2.2. 高阶组件的定义

  • 1. 高阶组件的调用过程类似于这样：
       
  • 2. 高阶函数的编写过程类似于这样：
       
  • 3. 组件的名称问题：
    • 在ES6中，类表达式中类名是可以省略的
    • 组件的名称都可以通过displayName来修改；
  • 4. 高阶组件并不是React API的一部分，它是基于React的组合特性而形成的设计模式；
  • 5. 高阶组件在一些React第三方库中非常常见：
    • 5.1. 比如redux中的connect;（后续会写到）

      •   // const newFn = connect(stateToProps, dispatchToProps)const newFn = connect(fn1, fn2)const NewHome = newFn(Home)export default connect(fn1, fn2)(Home)// 作用：将redux中的数据，插入到Home中的props里面
        

    • 5.2. 比如react-router中的withRouter;（后续会写到）

• 2.3. 高阶函数的意义

  • 1. 我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理。
  • 2. 其实早期的React有提供组件之间的一种复用方式mixin, 目前已经不在建议使用：
    • 2.1. Mixin可能会相互依赖，相互耦合，不利于代码维护：
    • 2.2. 不同的Mixin中的方法可能会相互冲突：
    • 2.3. Mixin非常多时，组件处理起来会比价麻烦，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性：
  • 3. 当然，HOC也有自己的一些缺陷：
    • 3.1. HOC需要再原始组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难；
    • 3.2. HOC可以劫持props, 在不遵守约定的情况下也可能造成冲突；
  • 4. Hooks的出现，是开创性的，它解决了很多React之前的存在的问题
    • 4.1. 比如this指向问题、比如HOC的嵌套复杂度问题等等；
  • 5. 后续还会专门来写hooks相关的知识，敬请期待

• 2.4. ref的转发(高阶组件的应用)

  • 1. 在前面我们学习ref时讲过，ref不能应用于函数式组件：
    • 因为函数式组件没有实例，所以不能获取到对应的组件对象
  • 2. 但是，在开发中我们可能想要获取函数式组件中某个元素的DOM，这个时候我们应该如何操作呢？
    • 2.1. 方式一：直接传入ref属性(错误的做法)
    • 2.2. 方式二：通过forwardRef高阶函数
  • 3. 高阶组件应用如下：

    function HelloWorld(props) {}// 1. 高阶组件memo：只有当props发生变化时，才会重新渲染组件memo(HelloWorld) => (类似于)PureComponent// 2. 高阶组件forwardRef，给函数式组件绑定ref// 调用forwardRef时，拿到ref处理后传递给组件，相当于把props和ref一起传递给返回的新组件forwardRef(HelloWorld)// 高阶组件：对原来的组件进行包裹，然后返回一个新的组件