preface

Higher-order components are a common concept in React circles, and one of the principles of React is to use pure functional programming.

But in the Vue circle we seem to discuss less, Vue on the side of the praise is easy to use, progressive development, so we see more in the development of Vue is

Let me go from basic concepts to real business scenarios to explain what higher-order components are.

A, high order components?

High-order components are high-order functions. React follows functional development, and the concept of high-order components was developed by the React community.

The phrase to keep in mind here is component = function.

A higher-order function, in layman’s terms, takes a function as an argument, passes it into another function, and returns a function.

2.1 Higher-order function definition

  • Accepts one or more functions as arguments.

  • A higher-order function returns a function

2.2 Examples of higher-order functions

Understanding the basic definition of high-order function, we know that many high-order functions in JS are actually used, take a common example of seeking maximum value

Const getMaxValue = function(val, fn) {return fn(val); }; Const Max = function(val) {return math.max. Apply (null,val)} var arr = [1,20,30,4,5] getMaxValue(arr,Max)Copy the code

You can see that the Max function is passed as an argument to getMaxValue, and getMaxValue returns the function. This is a typical higher-order function

2. Practical application scenarios

1.1 Service Scenarios

You need to add anti-shake functionality to all of the buttons in the ElementUI Button that you use in an admin background.

1.2 Scenario Analysis

There are many buttons in the old code. It is not practical to change them one by one. Is there any way to wrap the Button layer and implement its own logic? Similar to the concept of inheritance, method overloading that is common in backend languages.

I’m going to use a very common onion model

1.3 Solution

Above we touch the concept of higher-order function, does not affect the function of the original Button, at the same time in the original Button components to make logical supplement, is not the higher-order component?

Before we do that, we’ll introduce a tool called Vue’s Render function, which looks something like this

render: function (createElement) { return createElement( ... // a series of components)}Copy the code

This is a standard higher-order function, passing in the createElement function and returning the createElement function

Third, render the use of higher-order functions

Again, let’s see how Render overrides the Button component of elementUi

// NewButton.vue <script> import { Button } from 'element-ui' export default { name: 'Button', components: { 'el-button': Button }, data() { return { timer: null } }, methods: $emit('click') {const that = this clearTimeout(that.timer) that. Timer = setTimeout(function() {that.$emit('click') }, 1000); }}, render(createElement) {return createElement('el-button', {on: {click: this.click}}, 'button')}} </script>Copy the code

When you use a new component

// test.vue <template> <NewButton @click="click" /> </template> <script> import NewButton from "./Button"; Export default {components: {NewButton}, methods: {click() {console.log(' one second of anti-shake effect ')}}} </script>Copy the code

The results show that the use of higher-order functions can perfectly solve business problems, without the need to change the source code to repackage a series of operations.

Four,

As an advanced usage, higher-order functions are also commonly used in actual business scenarios. However, in the process of learning, we are used to using tools rather than digging out why we can use them in this way. It is normal for developers to know what they are and not know why.

Today’s article record is another growth of my personal technical career. I hope my personal knowledge can help you better understand the concept and application scenarios of higher-order functions.