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)

  // 高阶组件：对原来的组件进行包裹，然后返回一个新的组件