React HOC高阶组件学习笔记

React HOC是什么？

React HOC — Higher Order Component ，又叫React 的高阶组件，它通常用一个函数来实现，这个函数接受一个 Component 并输出另一个 Component ，类似于 Java 的代理模式，用组合或者其它的方式去实现一些对象的装饰器或拦截器。
总结来说React HOC本质上就是一个函数，这个函数接收了一个组件old，然后会返回一个新的组件new供你使用，这个新的组件是在old组件的基础上构建起来的，因此在old组件的功能上实现了一些扩展，但是这个扩展是完全没有侵入old组件的代码的。
React HOC高阶组件名字的来源其实来自JS中的高阶函数，在JavaScript中将那些可以接收另一个函数作为参数的函数称为高阶函数，例如常见的reduce函数、map函数等。因此在React中将那些接收一个组件作为参数并返回一个新的组件的函数称为高阶组件，常见形式如下：

//高阶组件定义
const HOC = (WrappedComponent) =>
  class WrapperComponent extends Component {
   
    render() {
   
      return <WrappedComponent {
   ...this.props} />;
    }
}

React HOC的作用与实现

React HOC的作用如下：

• 代码复用（显然）和逻辑抽象
• 对 state 和 props 进行抽象和操作
• Render 劫持
• 对 WrappedComponent 进行细化，比如添加生命周期

React HOC的实现方式通常有两种，分别是属性代理和反向继承两种方式。
​

React HOC的核心-闭包原理

首先看一个求和的函数add，功能很简单，输入一个数a，返回a+2。通常情况下，求和的函数是这样定义的：

function add(num){
   
  var num1 = 2;
  return num+num1;
}
console.log(add(1));//3

但是，如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果࿰