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