React高阶组件HOC（一）

关于react高阶组件的官方文档
https://reactjs.org/docs/high...。

起因

之前和几个朋友讨论react的过程中，大家都认为对react已经非常熟悉了，忽然聊到react高阶组件问题，都不能清楚说出个所以然来，表面上大家很少用react高阶组件，但实际上react高阶组件在react应用中非常非常重要，并且也时常用到。
如此重要的内容实际上优质资料却很少，今天想就react高阶组件记录下自己的学习理解。

基本概念

需要了解react高阶组件需要先了解高阶函数。

高阶函数：

1、把函数作为参数传递。

setInterval(() => {
    //需要做的事情
}, 3000)

2、函数可以作为返回值输出。

function test(a) {
// 返回一个匿名函数
    return function() {
        return a
    }
}

了解高阶函数之后来了解一下高阶组件。

高阶组件：

1、高阶组件就是接受组件作为参数，最终返回一个新组件的函数。
2、需要明白一点的是高阶组件是一个函数而不是一个组件。

高阶组件含义

下面写个小的例子解释下高阶组件，我们设置三个组件分别叫做A.js,B.js和C.js。

A.js为高阶组件，WrappedComponent是接受的普通组件参数，最终export的是一个function,即上面提到的概念：最终返回一个新组件的函数

import React, { Component } from 'react'

// WrappedComponent为传入的普通组件
export default function A(WrappedComponent) {
  return class A extends Component {
    render() {
      return (
        <div className="box">
          <div>我是公共组件A的内容</div>
          <WrappedComponent />
        </div>
      )
    }
  }
}

B.js 调用A高阶组件，最终导出是把B传入A函数中形成新的组件。

import React, { Component } from 'react'
import A from './A'

class B extends Component {
  render() {
    return (
      <div>这是组件B</div>
    )
  }
}

export default A(B)

C.js和B.js一个意思

import React, { Component } from 'react'
import A from './A'

class C extends Component {
  render() {
    return (
      <div>这是组件C</div>
    )
  }
}

export default A(C)

然后分别把B.js和C.js写入dom中，最终效果图：

可以看出公共的部分内容，被复用了。

高阶组件装饰器

装饰器写法使得代码看起来更优雅，说到装饰器是不是想起来redux中的@connect。

首先需要配置项目以支持装饰器，需要配置babel：

cnpm install --save-dev @babel/plugin-proposal-decorators

在package.json中配置babel选项：

"babel": {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ],
    "presets": [
      "react-app"
    ]
  }

下面对B.js进行改造。

import React, { Component } from 'react'
import A from './A'
//装饰器加入高阶组件A
@A
class B extends Component {
  render() {
    return (
      <div>这是组件B</div>
    )
  }
}

export default B