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