React: high-order component (HOC)

I. Introduction

As we know, JavaScript there is such a concept of higher-order functions, higher-order function itself is a function, it will receive or return a function, then the function to operate. In fact, in the same React to have such a thing higher order components, called HOC, it is also a function, but the difference is that with the higher-order functions, higher-order component operation is a component that receives a component as a parameter, then returns a further component. Typically, HOC use can maintain a State or comprising several functional classes to packaging assembly input, the parent component retention State or several functions as an attribute parameters passed down to the component, the component does not need to know the details parameter HOC implementation code, it allows users to build more stateless functional components, to concentrate on managing their own interface UI. Therefore, the high-order component is the best way to function between reusable components.

 

Second, the use

High-order component, the data on a list of countries in the post loading logic, display logic separation, the following steps:

1, a package component list, the data presentation logic to encapsulate

// 1, a list of the package assembly, the package together show the logic 
const ListComponent = ({Data, Selected = "" }) =>
    <select className="list" defaultValue={selected} style={{fontSize:20,color:'red'}}>
        {data.map(({name},i) => <option key={i} value={name}>{name}</option>)}
    </select>;

2, a package component data, the data request process to encapsulate

// 2, a data package assembly, the package loading process and parse them, this component receives a ParameterComponent component, and a request url address 
const DataComponent = (ParameterComponent, url) =>

    class DataComponent extends Component {

        constructor(props){
            super(props);
            this.state = {
                data:[],
                loading:false
            }
        }

        componentDidMount() {
            this.setState({loading: true});
            fetch(url)
　　　　　　　　　　.then(response => response.json())
　　　　　　　　　　.then(data => this.setState({loading:false, data:data}))
        }

        render(){
            const {loading} = this.state;
            return (
                <div className="data">
                    {(loading)? <div>now is Loading...</div> : <ParameterComponent {...this.state} {...this.props}/>}
                </div>
            )
        }
    };

3, create a parent component, a list of incoming components and url

// 3, create data components, assemblies and lists of incoming url 
const Country = DataComponent (ListComponent, " https://restcountries.eu/rest/v1/all " );

4, a parent component mount 

//导出
export default class App extends Component {
    render() {
        return <Country selected="China"/>
    }
}

// mount 
ReactDOM.render (
   <the App /> ,
  document.getElementById('root')
);

 

Third, the results

1, the complete code

import React, { Component } from 'react';
import fetch from "isomorphic-fetch";


// 1, a list of the package assembly, the package together show the logic 
const ListComponent = ({Data, Selected = "" }) =>
    <select className="list" defaultValue={selected} style={{fontSize:20,color:'red'}}>
        {data.map(({name},i) => <option key={i} value={name}>{name}</option>)}
    </select>;

// 2, a package component data, parse and process the loading of encapsulated 
const DataComponent = (ParameterComponent, URL) =>

    class DataComponent extends Component {

        constructor(props){
            super(props);
            this.state = {
                data:[],
                loading:false
            }
        }

        componentDidMount() {
            this.setState({loading: true});
            fetch(url).then(response => response.json()).then(data => this.setState({loading:false, data:data}))
        }

        render(){
            const {loading} = this.state;
            return (
                <div className="data">
                    {(loading)? <div>now is Loading...</div> : <ParameterComponent {...this.state} {...this.props}/>}
                </div>
            )
        }
    };

// 3, create data components, assemblies and lists of incoming url 
const Country = DataComponent (ListComponent, " https://restcountries.eu/rest/v1/all " );

export default class App extends Component {

    render() {
        return <Country selected="China"/>
    }
}

View Code

2, demo screenshots