What does react high-order component mean?

In React, a higher-order component is a function, which is an advanced technology for reusing component logic; a higher-order component is used to accept a component as a parameter and return a new component. This new component will use The component passed to it serves as a subcomponent, and higher-order components can be implemented using property proxy and reverse inheritance.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What does react high-order component mean

A high-order component is a function (not a component) that accepts a component as a parameter and returns a new component. This new component will use the component you pass it as a child component - Quoted from React.js Little Book

Higher-Order Components are an advanced technology in React for reusing component logic. HOCs themselves are not part of the React API. They're a pattern that emerges from the very nature of React's conception.

When using the react-redux framework in our project, there is a concept of connect. The connect here is actually a high-order component. It also includes concepts similar to withRouter in react-router-dom

Building a simple hoc

function hello (){
    console.log("hello i  love react ")
}
function hoc(fn){
    return ()=>{
          console.log("first");
          fn();
          console.log("end");
    }
}
hello = hoc(hello);
hello();

Methods to implement high-order components

There are two ways to implement high-order components:

• Attribute proxy. Higher-order components operate props

• reverse inheritance through wrapped React components. High-order components inherit from the wrapped React components

Next we will explain these two methods separately.

Attribute proxy

Attribute proxy is the implementation method of common high-order components in our react. We will illustrate it through an example:

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return <WrappedComponent {...this.props} />
        }
    }

From here The most important part to see is that the render method returns the React component passed into WrappedComponent. In this way, we can pass props through higher-order components. This method is called attribute proxy.

Naturally, it becomes very easy for us to use the high-order component MyContainer:

import React,{Component} from 'react';
class MyComponent extends Component{
    //...
}
export default MyContainer(MyComponent);

In this way, the component can be called as a parameter layer by layer, and the original component has high-order The component modifies it. It's that simple, maintaining the encapsulation of a single component while retaining ease of use. Of course, we can also use decorator to convert.

When building higher-order components using property proxies, the order of calls is different from mixins. The above process of executing the life cycle is similar to a stack call:

didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount

Reverse inheritance

Another way to build higher-order components is called reverse inheritance, literally Judging from the meaning, it must be related to inheritance. Let's also look at a simple implementation.

const MyContainer = (WrappedComponent)=>{
    class extends WrappedComponent {
        render(){
            return super.render();
        }
    }
}

The above code. The components returned by higher-order components inherit from WrappedComponent. Because WrappedComponent is passively inherited, all calls will be reversed, which is also the origin of this method.

This method is not the same as attribute proxy. It is implemented by inheriting WrappedComponent, and methods can be called sequentially through super. Because it relies on the inheritance mechanism. The calling sequence of HOC is the same as that of queue.

didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)

In the reverse inheritance method, higher-order components can be referenced using WrappedComponent, which means that it can use the state and props of WrappedComponent. Life cycle and render method. But it does not guarantee that the complete subcomponent tree is parsed. It has two major features, which we will discuss below.

Rendering hijacking

Rendering hijacking means that higher-order components can control the rendering process of WrappedComponent and render various results. In this process, we can read, add, modify, and delete props in the output results of any React element, or read or modify the React element tree, or conditional display. Or wrap the element tree with styles

Control state

Higher-order components can read, modify or delete the state in the WrappedComponent instance, and if necessary, can also add state.

Component naming

When wrapping a higher-order component, we lose the displayName of the original WrappedComponent, and the component name is an important attribute that facilitates our development and debugging.

Component Parameters

Sometimes, when we call higher-order components, we need to pass in some parameters, which can be achieved in a very simple way.

import React from 'react'
function HOCFactoryFactory(...params){
    return function HOCFactory(WrappedComponent){
        return class HOC extends Component{
            render(){
                return <WrappedComponent {...this.props} />
            }
        }
    }
}

When you use it, you can write like this:

HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)class WrappedComponent extends React.Component{}

This also takes advantage of the characteristics of functional programming. It can be seen that in the process of React abstraction, its shadow can be seen everywhere.

Recommended learning: "react video tutorial"

The above is the detailed content of What does react high-order component mean?. For more information, please follow other related articles on the PHP Chinese website!