This is not a chain call. This is a nesting doll call.
import React, { Component } from ‘react’;
// High-order component: This is not a component, but is essentially a function that takes one or more components and returns a new component with Comment for high-order components
// Higher order function
// definition: the argument received is a function or the return value is a function
// Common: array traversal related methods, timers, promises, higher-order components
// Function: implement a more powerful dynamic function
// const highOrderCom = (Comp)=>{
// // returns a new component
// const NewComponent = (props)=>{
// // Property broker
// const attr = {type:’ high order ‘,price:’1999’}
// return
// }
// return NewComponent
// }
// A higher-order component that prints logs
const witchLOg = (Comp)=>{
Console. log(comp.name +’ rendered ‘);
const newCom = (props)=>{
return
}
return newCom;
}
const highOrderCom = (Comp)=>{
return class extends Component{
constructor(props){
super(props);
}
componentDidMount(){
Console. log(‘ Initiate Ajax request ‘)
}
handleClick=()=>{
}
render(){
return(
// Property proxy is the most common implementation
)
}
}
}
class Hoc extends Component {
render() {
return (
<div>
current course: {this.props. Name}
current price: {this.props. Content}
</div>
);
}
}
// chain call
export default highOrderCom(witchLOg(witchLOg(Hoc)))
/ *
1. Why do we need higher-order components?
The higher-level components in React write easy to maintain React code, reducing time.
2. What are the higher-order components?
Essentially a function that takes one or more components, returns a new component,
3. How to implement higher-order components
Property brokering is the most common implementation and reverse inheritance
Benefits: Common methods are isolated and reused many times
4. Application of advanced components
1. Code reuse
2. Permission control
3. Print logs
* /