The so-called higher-order component is even a function that takes a component as an argument and returns a new component, which is used to improve the “capability” of the component and improve the reuse of the component

1. Common advanced components

HOC functions pass parent attributes and append new ones, adding styles and newnames to Dumb

// App.js
import React from 'react';
import Dumb from './HocDemo';


function App() {
  return (
    <div className="App">
      <Dumb name="Puppet assembly" color="#afa"/>
    </div>
  );
}

export default App;

// HocDemo.js
import React from 'react'Const HOC = (Comp) => (props) => {const style = {display:'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '500px',
    height: '300px',
    border: `2px solid ${props.color}`,}return<Comp style={style} {... props} newName="Higher order component"/>} // Puppet componentsfunction Dumb(props) {
  return(< div style = {props. Style} > I am {props. NewName | | props. The name} | | ontology is {props. The name} < / div >)}export default HOC(Dumb);
Copy the code

You can also add life cycles, etc., to Dumb to handle logic

Const HOC = (Comp) => {class NewDumb extends React.Component {componentDidMount() {
      console.log('NewDumb')}render() {
      const style = {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '500px',
        height: '300px',
        border: `2px solid ${this.props.color}`,}return<Comp style={style} {... this.props} newName="Higher order component"/ >}}return NewDumb
}
Copy the code

2. High order component decorator writing method

You need a few bags first

yarn add react-app-rewired customize-cra @babel/plugin-proposal-decorators -D
Copy the code

Create config-overrides. Js (equivalent to vue.config.js) with the directory as follows

const { override, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy(),
);
Copy the code

Modify HocDemo. Js

@hoc Class Dumb extends React.Component{render(){
    const { style, newName, name } = this.props
    return(< div style = {style} > I am {newName | | name} | | ontology is {name} < / div >)}}export default Dumb;
Copy the code

3. Use of the new context

Write a context.js to use in app.js, declare a Context and initialize the data store, Encapsulate the two functions withConsumer and withProvider through the decorator to make the parent component have the provider function, while the components wrapped by withConsumer under the Container component have the consumer function to achieve cross-level component communication parent => grandchildren

import React, { Component } from "react"; // Generate a Context const Context = react.createcontext (); const store = { name:"Zzz"}; Const withProvider => props => (< context. Provider value={store}> <Comp {... props} /> </Context.Provider> ); Const withConsumer = props => (< context. Consumer> {value => <Comp {... props} value={value} />} </Context.Consumer> ); @grandson extends Component {withConsumer class Grandson extends Component {render() {
    return<div>{this.props.value.name}</div>; }} @withProvider class Provider extends Component {render() {
    return<div><Container/></div>; }} // A container componentfunction Container(props) {
  return(<div> <Container2/> <Container3/> </div>)} // A container component 2function Container2(props) {
  return} // A container component 3function Container3(props) {
  return (
    <div> Container3 </div>
  )
}
export default Provider
Copy the code