高階元件（HOC）是 React 中一項有趣的技術(shù)，用於重構(gòu)共享幾乎相同邏輯的類似元件。我知道這聽起來很抽象而且很高級。然而，它是一種並非特定於 React 的架構(gòu)模式，因此您可以使用該方法來做很多事情。

例如，您可以使用它向某個組件添加載入指示器，而無需調(diào)整原始組件，或者您可以隱藏組件的屬性以使其不那麼冗長。應(yīng)用程式有很多，我試圖在本教程中介紹其中的大部分。

還有其他幾個教程可以教您有關(guān) HOC 的知識，但其中大多數(shù)都是針對高級 React 開發(fā)人員的。當(dāng)我開始學(xué)習(xí) React 時，我很難理解高階元件的概念以及如何將 HOC 合併到我的專案中以編寫更好的程式碼。本文將解釋您需要了解的 HOC 從頭到孵化的所有內(nèi)容。

概述

本教程分為三個部分。第一部分將介紹高階組件的概念。在這裡，我們將討論在查看高階函數(shù)和 HOC 之前需要了解的語法。第二部分是本系列中最令人興奮的部分，您將看到 HOC 的實際範(fàn)例。我們將使用 HOC 來建立表單、授權(quán)和許多其他事情。

在本教程的第三部分中，我們將更專注於最佳實踐以及實現(xiàn)高階元件時需要考慮的事項。我們也將簡要介紹 React 中程式碼共享的替代模式，例如 Render props。

在開始之前，最好先看看有狀態(tài)元件與無狀態(tài)元件的教學(xué)課程，以便更能理解 React 的元件架構(gòu)。

ES6 語法備忘單

我們很快就會動手。但在此之前，我認(rèn)為您應(yīng)該了解一些事情。我喜歡盡可能使用 ES6 語法，它與 HOC 配合得很好。作為初學(xué)者，HOC 有意義，但某些 ES6 文法卻沒有意義。因此，我建議您先瀏覽一遍本節(jié)，稍後您可以再回來參考。

箭頭函數(shù)

箭頭函數(shù)是常規(guī)函數(shù)表達(dá)式，但語法較短。它們最適合非方法函數(shù)，這也是我們特別感興趣的。以下是一些幫助您入門的範(fàn)例：

不帶參數(shù)的函數(shù)

/* Functions without parameters */
function () {
    return "This is a function expression";
}

// is equivalent to

() => {
 return "This is an arrow function expression"
}

// or 

() => "Arrow with a shorter syntax"

具有單一參數(shù)的函數(shù)

/* Function with a single parameter */

function (param) {
  return { title: "This function accepts a parameter and returns an object",
          params: param}
}

// is syntax-equivalent to 

param => {
    return { title: "This arrow function accepts a single parameter",
        params: param }
}

具有多個參數(shù)的函數(shù)

/* Function with multiple parameters */

function (param1, param2) {
  return { title: "This function accepts multiple parameters",
          params: [param1,param2]}
}

// is syntax-equivalent to 

(param1, param2) => {
    return {title: "Arrow function with multiple parameters",
    params: [param1, param2]
    }
}

// or

(param1, param2) => ({
      title: "Arrow function with multiple parameters",
    params: [param1, param2]
    })

函數(shù)式程式設(shè)計中的柯里化

雖然這個名字暗示它與流行的印度美食中的一道異國菜餚有關(guān)，但事實並非如此?？吕锘蓞f(xié)助您將接受多個參數(shù)的函數(shù)分解為一系列一次接受一個參數(shù)的函數(shù)。這是一個例子：

//Usual sum function
const sum = (a, b) => a + b

//Curried sum function 
const curriedSum = function (a) {
    return function (b) {
        return a+b
    }

//Curried sum function using arrow syntax
const curriedSum = a => b => a+b

curriedSum(5)(4)
//9

函數(shù)只接受一個參數(shù)，並傳回一個接受另一個參數(shù)的函數(shù)，這種情況會持續(xù)到滿足所有參數(shù)為止。

curriedSum
// (a) => (b) => a+b

curriedSum(4)

// (b) => 4+b

curriedSum(4)(5)

//4+5

一個密切相關(guān)的術(shù)語稱為「部分應(yīng)用」。部分應(yīng)用程式透過預(yù)先填入現(xiàn)有函數(shù)的一些參數(shù)來建立新函數(shù)。新建立的函數(shù)的元數(shù)（即參數(shù)數(shù)量）將小於原始函數(shù)的元數(shù)。

傳播語法

擴(kuò)充運算子擴(kuò)充數(shù)組、字串或物件表達(dá)式的內(nèi)容。以下是您可以使用傳播運算子執(zhí)行的操作的清單

函數(shù)呼叫中的擴(kuò)充語法

/*Spread Syntax in Function Calls */
const add = (x,y,z) => x+y+z

const args = [1,2,3]

add(...args) 
// 6

陣列文字中的擴(kuò)充語法

/* Spread in Array Literals */

const twoAndThree = ['two', 'three']; 
const numbers = ['one', ...twoAndThree, 'four', 'five']; 
// ["one", "two", "three", "four", "five"]

物件文字中的擴(kuò)充語法

/* Spread in Object Literals */

const contactName = {
  name: {
    first: "Foo",
    middle: "Lux",
    last: "Bar"
  }
}
const contactData = {
  email: "fooluxbar@example.com",
  phone: "1234567890"
}

const contact = {...contactName, ...contactData}
/* { 
    name: {
        first: "Foo",
        middle: "Lux",
        last: "Bar"
    }
    email: "fooluxbar@example.com"
    phone: "1234567890"
  }
  
*/
        

我個人喜歡三個點可以讓您更輕鬆地將現(xiàn)有道具傳遞給子組件或創(chuàng)建新道具的方式。

#React 中的擴(kuò)充運算子

const ParentComponent = (props) => {
  const newProps = { foo: 'default' };
  
  return (
      <ChildComponent 
  		{...props} {...newProps} 
  	/>
  )
}

現(xiàn)在我們已經(jīng)了解了建構(gòu) HOC 的基本 ES6 語法，讓我們看看它們是什麼。

高階函數(shù)

什麼是高階函數(shù)？維基百科有一個簡單的定義：

在數(shù)學(xué)和計算機(jī)科學(xué)中，高階函數(shù)（也稱為泛函、函數(shù)形式或函子）是一種接受一個或多個函數(shù)作為參數(shù)或返回一個函數(shù)作為其結(jié)果或兩者兼而有之的函數(shù)。

您可能之前以某種形式在 JavaScript 中使用過高階函數(shù)，因為這就是 JavaScript 的工作方式。將匿名函數(shù)或回呼作為參數(shù)傳遞或傳回另一個函數(shù)的函數(shù) - 所有這些都屬於高階函數(shù)。下面的程式碼建立了一個本質(zhì)上更高階的計算器函數(shù)。

const calculator = (inputFunction) => 
    	(...args) => {
        
       const resultValue = inputFunction(...args);
       console.log(resultValue);
          
       return resultValue;
        }

const add = (...all) => {
	return all.reduce( (a,b) => a+b,0)	;
  
	}
  
 
const multiply = (...all) => {
  return all.reduce((a,b)=> a*b,1);
 
  }

讓我們更深入地了解這一點。 calculator() 接受一個函數(shù)作為輸入並傳回另一個函數(shù)－這完全符合我們對高階函數(shù)的定義。因為我們使用了剩餘參數(shù)語法，所以傳回的函數(shù)將其所有參數(shù)收集在一個陣列中。

然後，使用傳遞的所有參數(shù)呼叫輸入函數(shù)，並將輸出記錄到控制臺。所以計算器是柯里化的高階函數(shù)，你可以像這樣使用計算機(jī)：

calculator(multiply)(2,4);
// returns 8

calculator(add)(3,6,9,12,15,18); 
// returns 63

插入一個函數(shù)，例如 add() 或 multiply() 和任意數(shù)量的參數(shù)，以及 calculator()將從那里拿走它。所以計算器是一個擴(kuò)展了 add() 和 multiply() 功能的容器。它使我們能夠在更高或更抽象的層面上處理問題。乍一看，這種方法的好處包括：

1. 代碼可以在多個函數(shù)中重復(fù)使用。
2. 您可以在容器級別添加所有算術(shù)運算通用的額外功能。
3. 更具可讀性，并且能更好地表達(dá)程序員的意圖。

現(xiàn)在我們對高階函數(shù)有了一個很好的了解，讓我們看看高階組件的能力。

高階組件

高階組件是一個接受組件作為參數(shù)并返回該組件的擴(kuò)展版本的函數(shù)。

(InputComponent) => {
    return ExtendedComponent 
    }
    
// or alternatively

InputComponent => ExtendedComponent

擴(kuò)展組件 組成 InputComponent。 ExtendedComponent 就像一個容器。它呈現(xiàn) InputComponent，但因為我們返回一個新組件，所以它添加了一個額外的抽象層。您可以使用此層添加狀態(tài)、行為甚至樣式。如果您愿意，您甚至可以決定根本不渲染 InputComponent — HOC 能夠做到這一點以及更多。

下面的圖片應(yīng)該可以消除混亂（如果有的話）。

理論已經(jīng)講完了，讓我們開始看代碼。下面是一個非常簡單的 HOC 示例，它將輸入組件包裝在 <div> 標(biāo)記周圍。從這里開始，我將把 InputComponent 稱為 WrappedComponent，因為這是慣例。不過，您可以隨意命名它。

/* The `with` prefix for the function name is a naming convention.
You can name your function anything you want as long as it's meaningful 
*/

const withGreyBg = WrappedComponent => class NewComponent extends Component {
  
  const bgStyle = {
  		backgroundColor: 'grey',
	};
    
  render() {
    return (
      <div className="wrapper" style={bgStyle}>

        <WrappedComponent {...this.props} />
      </div>
    );
  }
};

const SmallCardWithGreyBg = withGreyBg(SmallCard);
const BigCardWithGreyBg = withGreyBg(BigCard);
const HugeCardWithGreyBg = withGreyBg(HugeCard);

class CardsDemo extends Component {
    render() {
        <SmallCardWithGreyBg {...this.props} />
        <BigCardWithGreyBg {...this.props} />
        <HugeCardWithGreyBg {...this.props />
    }
}

withGreyBg 函數(shù)將一個組件作為輸入并返回一個新組件。我們不是直接組合 Card 組件并將樣式標(biāo)簽附加到每個單獨的組件，而是創(chuàng)建一個 HOC 來實現(xiàn)此目的。高階組件包裝原始組件并在其周圍添加 <div> 標(biāo)簽。需要注意的是，這里你必須手動將 props 分兩層傳遞下去。我們沒有做任何花哨的事情，但這就是正常的 HOC 的樣子。下圖更詳細(xì)地演示了 withGreyBg() 示例。

雖然這目前看起來不是特別有用，但好處并不小?？紤]這種情況。您正在使用 React 路由器，并且需要保護(hù)某些路由 - 如果用戶未經(jīng)過身份驗證，則對這些路由的所有請求都應(yīng)重定向到 /login。我們可以使用 HOC 來有效管理受保護(hù)的路由，而不是重復(fù)身份驗證代碼。好奇想知道怎么做嗎？我們將在下一個教程中介紹這一點以及更多內(nèi)容。

注意：ECMAScript 中提出了一個稱為裝飾器的功能，可以輕松使用 HOC。但是，它仍然是一個實驗性功能，因此我決定不在本教程中使用它。如果您使用的是 create-react-app，則需要先彈出才能使用裝飾器。如果您運行的是最新版本的 Babel (Babel 7)，您所需要做的就是安裝 <em>babel-preset-stage-0</em> 然后將其添加到 webpack.config.dev.js 的插件列表中，如下所示。

// Process JS with Babel.
        {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
              presets: ['stage-0']
        },