Introduction to React higher-order components (decorators) (code examples)

This article brings you an introduction (code example) about React high-order components (decorators). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, before the formal high-order components, let’s learn about the similar operations of the function:

function hello () {
    console.log('hello')
}

function WrapperHello (fn) {
    return function () {
        console.log('before')
        fn && fn()
        console.log('after')
    }
}

hello = WrapperHello(hello)

hello()

The output of the above code will first output before, then hello, and finally after. The hello function is equivalent to wrapping a layer of unified logic outside and then returning, and the declaration overwrites the original hello function. This is the basic principle of high-order components.

Then let’s write a basic high-order component for comparison:

import React, { Component, Fragment } from 'react'

function WrapperHello (Comp) {
    class WrapComp extends Component {
        render () {
            return (
                <Fragment >
                    <p >这是高阶组件特有的函数</p >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

@WrapperHello
class Hello extends Component {
    render () {
        return (
            <p >Hello</p >
        )
    }
}

export default Hello

So here, it is not difficult to find that the component is actually a function, and we use the same idea to perform it Unified data processing, the Comp component passed in the WrapperHello function, and then we uniformly return a WrapComp function, in which when Comp is rendered, we pass in all the props passed by the parent for all data interaction, and then in the Hello component Above we use the @ symbol to make a simple statement, which is actually a declaration based on the same principle as the previous function wrapper. Then, the display of our final output component Hello will include the ' < in our higher-order component ;p >This is a function unique to higher-order components

High-order components are mainly divided into two types: Property proxy and Reverse inheritance. The function in the example belongs to the type of property proxy.

Example of reverse inheritance:

function WrapperHello (Comp) {
    class WrapComp extends Component {
        componentDidMount () {
            console.log('高阶组件新增的生命周期,加载完成')
        }
        
        render () {
            return (
                <Fragment >
                    <Comp { ...this.props }/>
                </Fragment >
            )
        }
    }
    
    return WrapComp
}

We can use componentDidMount to modify events that occur in the original component life cycle. This is the method of reverse inheritance.

Remember, the higher-order function returns a function, we just wrap it accordingly.

The above is the detailed content of Introduction to React higher-order components (decorators) (code examples). For more information, please follow other related articles on the PHP Chinese website!