React high-order components are used once!

First of all, welcome everyone to pay attention to my Github blog, which can also be regarded as a little encouragement to me. After all, writing things can not be realized, but it is my enthusiasm and everyone’s encouragement that can persist. I hope you pay more attention to it! The React section continues to be updated…

Why higher-order components? In Order to improve component reuse rate, the first thing we think of is to extract the same logic. In React, we have the concept of HOC(higher-order Components), so high-order Components in React are used to improve component reuse rate.

Higher-order component concepts

A higher-order component is a function that passes in one component and returns another new component, which can either wrap properties or override part of the lifecycle.

Stateless components of higher-order components

A higher-order component returns a new component, either as a class or as a stateless component. Let’s see how a higher-order component returns a stateless component.

Now there is a requirement for a component, pass in the title of a book, and get the chapter by the title. Since the logic of getting the chapter by the title is the same, we can extract it into a common component, and this common component is a higher-order component.

Create a new SRC/hock. js component and define a stateless component for the section of a Book, with props. Name as the title and props. Section as the section:

import React from 'react'
function Book(props) {
    return(
        <div>
            { props.name } - { props.section }
        </div>)}export default Book
Copy the code

Use this component in SRC /index.js, pass in the name of the book, and render at the root node:

import React from 'react';
import ReactDOM from 'react-dom';
import Hoc from './Hoc';

ReactDOM.render(<Hoc name="react"/>, document.getElementById('root'));
Copy the code

We still need a withSection component that fetches a chapter by its title. Use this higher-order component in the Book component:

function Book(props) {... }const withSection = Com= > {
    return props= > {
        const section = 'Section - Stateless Components for Higher-order Components' // Get the section from the title props. Name
        return(
            <Com {. props} section={section} />
        )
    }
}
export default withSection(Book)
Copy the code

The higher-order component that gets chapters passes in a component Book and returns a stateless component. In the returned component, the logic of obtaining chapters is processed. Book does not have chapter information, but it has it after using higher-order components.

NPM start, browser output

React - Chapter - Stateless components for higher-order componentsCopy the code

The class component of a higher-order component

If we’re going to use life cycle functions in higher-order withSection components, stateless components in withSection don’t apply, we need class components.

// Use lifecycle functions in higher-order components
const withSection = Com= > {
    class GetSection extends Component {
        state = {
            section: ' '
        }
        componentDidMount() {
            // ajax
            const section = 'Section - Class Components for Higher-order Components'
            this.setState({ section })
        }
        render() {
            return <Com {. this.props} section={this.state.section} />
        }
    }
    return GetSection
}
Copy the code

Chain calls to higher-order components

Instead of adding a higher-order component to the Book component that gets chapter names by title, we also want to keep track of how long the user is reading. What should we do? Higher-order components can be called chained, and multiple higher-order components can be nested. Let’s define a higher-order component withUserLog:

const withUserLog = Com= > {
    class GetUserLog extends Component {
        componentDidMount() {
            console.log('Records the user's reading time operation')
        }
        render() {
            return <Com {. this.props} / >
        }
    }
    return GetUserLog
}
Copy the code

Nesting with higher-order components is fine:

function Book(props) {... }const withSection = Com= >{... }const withUserLog = Com= >{... }// chain call
export default withUserLog(withSection(Book))
Copy the code