Higher-Order Components (HOC) are an interesting technique in React for refactoring similar components that share almost the same logic. I know this sounds abstract and advanced. However, it is an architectural pattern that is not specific to React, so you can do a lot with this approach.

For example, you can use it to add a loading indicator to a component without adjusting the original component, or you can hide a component's properties to make it less verbose. There are many applications and I tried to cover most of them in this tutorial.

There are several other tutorials that can teach you about HOCs, but most of them are aimed at advanced React developers. When I started learning React, I struggled to understand the concept of higher order components and how to incorporate HOCs into my projects to write better code. This article explains everything you need to know about HOCs from inception to incubation.

Overview

This tutorial is divided into three parts. The first part will introduce the concept of higher-order components. Here we will discuss the syntax you need to know before looking at higher order functions and HOCs. Part Two is the most exciting part of the series, where you'll see practical examples of HOCs. We will use HOC to create forms, authorizations and many other things.

In the third part of this tutorial, we will focus more on best practices and things to consider when implementing higher-order components. We'll also briefly cover alternative patterns for code sharing in React, such as Render props.

Before starting, it’s best to take a look at the tutorials on stateful components and stateless components to better understand React’s component architecture.

ES6 Syntax Cheat Sheet

We'll get started soon. But before that, there are a few things I think you should know. I prefer to use ES6 syntax whenever possible, it works well with HOCs. As a beginner, HOC makes sense, but some of the ES6 syntax doesn't. Therefore, I recommend that you skim this section first so that you can come back to it later.

Arrow function

Arrow functions are regular function expressions, but with shorter syntax. They are best suited for non-method functions, which is what we are particularly interested in. Here are some examples to get you started:

Function without parameters

/* 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"

Function with a single parameter

/* 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 }
}

Function with multiple parameters

/* 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]
    })

Currying in Functional Programming

While the name implies that it is related to an exotic dish in popular Indian cuisine, this is not the case. Currying helps you decompose a function that accepts multiple arguments into a series of functions that accept one argument at a time. Here is an example:

//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

The function accepts only one parameter and returns a function that accepts another parameter, and this continues until all parameters are satisfied.

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

curriedSum(4)

// (b) => 4+b

curriedSum(4)(5)

//4+5

A closely related term is called "partial application". Some applications create new functions by pre-populating some parameters of an existing function. The arity of the newly created function (i.e. the number of arguments) will be less than the arity of the original function.

Propagation syntax

The expansion operator expands the contents of an array, string, or object expression. The following is a list of operations you can perform using the spread operator

Extended syntax in function calls

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

const args = [1,2,3]

add(...args) 
// 6

Extended syntax in array literals

/* Spread in Array Literals */

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

Extended syntax in object literals

/* 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"
  }
  
*/
        

I personally like the way three dots make it easier for you to pass existing props to child components or create new ones.

Expand operator in React

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

Now that we understand the basic ES6 syntax for building HOCs, let’s see what they are.

Higher-order functions

What is a higher-order function? Wikipedia has a simple definition:

In mathematics and computer science, a higher-order function (also called a functional, functional form, or functor) is a function that accepts one or more functions as arguments or returns a function as its result, or both. function of it.

You've probably used higher-order functions in JavaScript in some form before, because that's how JavaScript works. Functions that pass anonymous functions or callbacks as arguments or return another function - all of these are higher-order functions. The code below creates an essentially higher order calculator function.

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);
 
  }

Let’s take a deeper look at this. calculator() Accepts a function as input and returns another function - this is exactly our definition of a higher-order function. Because we used rest parameters syntax, the returned function collects all of its parameters in an array.

Then, the input function is called with all arguments passed and the output is logged to the console. So calculator is a curried higher-order function, and you can use calculator like this:

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

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

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

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

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

高階組件

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

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

InputComponent => ExtendedComponent

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

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

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

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

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

注意：ECMAScript 中提出了一個(gè)稱為裝飾器的功能，可以輕松使用 HOC。但是，它仍然是一個(gè)實(shí)驗(yàn)性功能，因此我決定不在本教程中使用它。如果您使用的是 create-react-app，則需要先彈出才能使用裝飾器。如果您運(yùn)行的是最新版本的 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']
        },