React高阶组件HOC（一）

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

原由

以前和几个朋友讨论react的过程当中，你们都认为对react已经很是熟悉了，突然聊到react高阶组件问题，都不能清楚说出个因此然来，表面上你们不多用react高阶组件，但实际上react高阶组件在react应用中很是很是重要，而且也时经常使用到。
如此重要的内容实际上优质资料却不多，今天想就react高阶组件记录下本身的学习理解。

基本概念

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

高阶函数：

一、把函数做为参数传递。

setInterval(() => {
    //须要作的事情
}, 3000)

二、函数能够做为返回值输出。

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

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

高阶组件：

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

高阶组件含义

下面写个小的例子解释下高阶组件，咱们设置三个组件分别叫作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