Basic concepts of higher order functions

1 function can be passed as an argument

 setTimeout(()=>{
   console.log("aaaa")
  },1000)

2 function can be output as return value

  function foo(x){
        return function(){
           return x
        }
      }

 //Usual application scenarios      
//ajax medium
 $.get("/api/getTime",function(){
     console.log("Get success")
  })
 //Array
 some(), every(),filter(), map()and forEach()     
 

High order component

A higher-order component is a function that takes a component as an argument and returns a new component

Higher order component is a function, not a component

Example: component A contains component B

 import React , { Component }from 'react'
    function A(WrappedComponent){
     return  class A extends Component{  //We have to rerun out here
       render() {
        return(
         <div>
           //This is A component
           <WrappedComponent></WrappedComponent>
         </div>
         )
       }
      }
     }

    export default  A
    
    

Application of high order components

Passing parameters

import React, { Component } from 'react';
import './App.css';
import B from './components/B'
class App extends Component {
  render() {
   return (
     <div className="App">
        //This is my APP
       <B age="18" name="Tom"/>
     </div>
   );
  }
}
export default App;


//A component
import React , { Component }from 'react'
export default (title)=> WrappedComponent => {
return  class A extends Component{
 render() {
  return(
    <div>
       //This is A component {title}
       <WrappedComponent sex="male" {...this.props}></WrappedComponent>
    </div>
    )
   }
 }
}

 //B component
import React , { Component }from 'react'
import A from './A.js'
class B extends Component{
  render() {
   return(
    <div>
     //Gender: {this.props.sex}
     //Age: {this.props.age}
     //Name: {this.props.name}
    </div>
   )
  }
 }
export default  A('Tips')(B)

//There are two ways to reference higher-order functions. The first way is to enter
//Second kinds

import React , { Component }from 'react'
import a from './A.js'
@a('Tips')
class B extends Component{
  render() {
   return(
    <div>
     //Gender: {this.props.sex}
     //Age: {this.props.age}
     //Name: {this.props.name}
    </div>
   )
  }
 }
export default B

To use the second method

The implementation of higher-order components in inheritance mode

   //D.js
import React from 'react'
const modifyPropsHOC= (WrappedComponent) =>  class NewComponent extends WrappedComponent{
render() {
   const element = super.render();
   const newStyle = {
     color: element.type == 'div'?'red':'green'
   }
   const newProps = {...this.props,style:newStyle}
   return React.cloneElement(element,newProps,element.props.children)
 }
} 
export default modifyPropsHOC


 // E.js

import React, {Component} from 'react'
import D from './D'
class E extends Component {
render(){
return (
  <div>
  //My div
  </div>
);
}
}

export default D(E)


// F.js
import React, {Component} from 'react'
import d from './D'
class F extends Component {
render(){
return (
  <p>
  //My p
  </p>
);
}
}

export default d(F)


import React, { Component } from 'react';
import './App.css';
import E from './components/E'
import F from './components/F'
class App extends Component {
  render() {
return (
  <div className="App">
   //This is my APP
   <E></E>
   <F></F>
  </div>
  );
  }
}

export default App;

Modify lifecycle

import React from 'react'
const modifyPropsHOC= (WrappedComponent) =>  class NewComponent extends WrappedComponent{
componentWillMount(){
alert("My modified life cycle");
}
render() {
   const element = super.render();
   const newStyle = {
color: element.type == 'div'?'red':'green'
   }
   const newProps = {...this.props,style:newStyle}
   return React.cloneElement(element,newProps,element.props.children)
  }
}

export default modifyPropsHOC