High-order component: A high-order component is a function that takes a component as an argument and returns a new component by adding some functionality to the function. The demo is as follows:

HOC.jsx import React from 'react'; export function MyHoc(WrappedComponent: any) { return class extends React.Component { constructor(props: any) { super(props); this.state = { test: 'this is my Hoc ! '} this.changevalue = this.changevalue.bind (this)} componentDidMount () {console.log('HOC initialized! ') } componentDidUpdate () { console.log('MyHoc! '); } changeValue = () => { console.log(Math.random() * 10000); this.setState({ test: Math.random() * 10000 }) } render () { return < WrappedComponent state={this.state} changeValue={this.changeValue} {... this.props} /> } } }Copy the code

Using this HOC:

testPages.jsx: import React, { Component } from 'react'; import { MyHoc } from '.. /.. /components/Hoc1'; class MyHocTest2 extends Component { render () { return ( <div> <button onClick={() => </button> {this.props.state.count} </div>)}} class MyHocTest3 extends Component {render () {return (<div> <button onClick={() => {this.props. ChangeValue ()}}> This is my HOC! </button> { this.props.state.test } </div> ) } } const EnhanceC = logProps(MyHocTest2) const MyHoc1 = MyHoc(MyHocTest3) class HocComponent extends Component { render () { return ( <div id='root' > <EnhanceC /> <EnhanceC2 /> <MyHoc1 /> </div> ); } } export default HocComponentCopy the code