Zusammenfassung der HOC-Nutzung von React-High-Order-Komponenten

/*
  HOC (High-Order Component): Empfängt eine Komponente und gibt eine verpackte Komponente (erweiterte Komponente) zurück.
    - Keine React-API
    - ist ein Entwurfsmuster, ähnlich dem Dekoratormuster - ≈ Mixin && > Minxin

  const gewickelte Komponente = Komponente höherer Ordnung (gewickelte Komponente);
  // zB const Wrapper = withRouter(NavBar);


  Die höherwertige Komponente übergibt alle empfangenen Props an die umschlossene Komponente (transparente Übertragung).
  Ref ist ähnlich wie key. Es ist kein Requisit und wird daher nicht weitergegeben. Ref wird an den äußeren Verpackungsbehälter gebunden. Die Lösung finden Sie unter <<Handling ref>>
* */

/*
  Wie verpacke ich Komponenten?

  Erstens: Beim normalen Verpacken-Export importieren Sie React von „React“.
      importiere Hoc aus „./Hoc“;

      Klasse Header erweitert React.Component {
        rendern() {
          Rückgabewert <span>{ this.props.count }</span>
        }
      };

      exportiere Standard-Hoc(Header);

    ==========

    Paket nach dem Import:
      Header aus „./header“ importieren;
      importiere Hoc aus „./Hoc“;

      const EnhanceHeader = Hoc(Header);

      const Home = () => {
        zurückkehren (
          <div>
             <EnhanceHeader-Anzahl={1} />
          </div>
        )
      }

  Der zweite Typ: Decorator-Verpackung, kann nur in Klassenkomponenten verwendet werden, um React von „React“ zu importieren.
    importiere Hoc aus „./Hoc“;

    @Hoc
    exportiere Standardklasse Header erweitert React.Component {
      rendern() {
        Rückgabewert <span>{ this.props.count }</span>
      }
    };

    =======

    @Hoc
    Klasse Header erweitert React.Component {
      rendern() {
        Rückgabewert <span>{ this.props.count }</span>
      }
    };

    Standard-Header exportieren;
* */

/*
  Definieren Sie ein einfaches HOC, das eine Komponente empfängt und eine Komponente zurückgibt, importieren Sie React von „React“.

  //Gibt die Standardfunktion des Komponentenexports Hoc(WrappedComponent) zurück {
    /*
      Rückgabeklasse erweitert React.Component {}
        - Der in React Developer Tools angezeigte Name ist Component

      Rückgabeklasse Wrapper erweitert React.Component {}
        - Der in React Developer Tools angezeigte Name ist Wrapper
    *\
    return-Klasse erweitert React.Component {
      rendern() {
        Geben Sie die Zeichenfolge <WrappedComponent {...this.props} /> zurück.
      }
    };
  }

  //Gibt eine funktionale Komponente zurück export default function Hoc(WrappedComponent) {
    /*
      Rückgabefunktion (Requisiten) {}
        - Der in React Developer Tools angezeigte Name ist „Anonymous“

      Rückgabefunktion Wrapper (Requisiten) {}
        - Der in React Developer Tools angezeigte Name ist Wrapper
    *\
    Rückgabefunktion Wrapper (Requisiten) {
      Geben Sie die Zeichenfolge <WrappedComponent {...props} /> zurück.
    };
  }
* */

/*
  Übergeben Sie Parameter an Hoc // Hoc kann alle Parameter akzeptieren export default function Hoc(WrappedComponent, title, user, data) {
      Rückgabeklasse Wrapper erweitert React.Component {
        rendern() {
          return <WrappedComponent {...this.props} />
        }
      };
    };

    // Parameter beim Verpacken übergeben const EnhanceHeader = Hoc(Header, 'title', { name: '霖'}, [1, 2, 3]);
* */

/*
  Hoc-Verschachtelung, das Prinzip der Funktionscurrying // Hoc1: füge der Komponente das Titelattribut hinzu Export-Standardfunktion Hoc1(WrappedComponent, title) {
    return-Klasse erweitert React.Component {
      rendern() {
        return <WrappedComponent Titel = {Titel} {...this.props} />
      }
    };
  };

  // Hoc2: Ändere den Anzeigeinhalt der Komponente Export-Standardfunktion Hoc2(WrappedComponent, content) {
    return class extends WrappedComponent { // Hier wird umgekehrte Vererbung verwendet render() {
        const elementTree = super.render(); // React verwendet Js-Objekte, um die Dom-Baumstruktur zu simulieren. Sie können Daten manipulieren, indem Sie die Eigenschaften von Js-Objekten ändern console.log(elementTree); // Wenn Sie nicht viel über die Struktur darin wissen, können Sie sie ausdrucken + offizielle Website cloneElement(), um mehr zu erfahren const newElementTree = React.cloneElement(elementTree, { children: `Ihr Inhalt wurde entführt: ${content}` });

        gibt neuenElementBaum zurück;
      }
    };
  };

  // Umschlossene Komponente exportiert Standardklasse Header erweitert React.Component {
    rendern() {
      const { Titel } ​​= diese.Eigenschaften;

      zurückkehren (
          <span title={title}>
            Standardinhalt</span>
        )
    }
  };

  // Verwenden Sie import Hoc1 von './Hoc1';
  importiere Hoc2 aus „./Hoc2“;

  /*
    Verpackungsprozess 1. const Wrapper = Hoc2(Header, 'content');
    2. Hoc1 (Wrapper)
  **
  const EnhanceHeader = Hoc1(Hoc2(Header, 'Inhalt'), 'Titel');

  Exportieren der Standardfunktion Home() {
    zurückkehren (
      <div>
        <EnhanceHeader />
      </div>
    );
  };

* */

/*
  Umgang mit Schiedsrichtern
  zB Hoc1(Hoc2(Inhalt))

  <Content ref={myRef} /> Der an Content gebundene Ref wird an Hoc1 gebunden und nicht an die erste Methode React.forwardRef weitergegeben ================

      Verwenden Sie React.forwardRef(), um den Verweis außerhalb von Hoc1 zu verarbeiten, und verwenden Sie Props, um den Verweis zu übergeben.
      0. Fügen Sie forwardRef außerhalb der Komponente höherer Ordnung ein, fangen Sie ref ab und erhalten Sie es, fügen Sie ein props (xxx={ref}) hinzu und erhalten Sie die reale Komponente über props.xxx1. Übergeben Sie ref={XXXX} bei Verwendung // Unterschied zur zweiten Methode2. Verwenden Sie den zweiten Parameter von forwardRef, um ref zu erhalten
      3. Fügen Sie eine neue Eigenschaft hinzu, um den Verweis nach unten weiterzuleiten, z. B. forwardedRef={ref}
      4. Binden Sie ref={props.forwardedRef} in die reale Komponente ein

      const Home = (Eigenschaften) => {
        const connectRef = useRef(null);

        zurückkehren (
          <div>
            <Inhaltsref={connectRef} />
          </div>
        );
      };

      // Umschlossene Komponente const Content = (props) => {
        zurückkehren (
          <div>
            <input type="Passwort" ref={props.forwardedRef} />
          </div>
        );
      };


      // Der zweite Eingabeparameter von forwardRef kann ref empfangen und ref in der äußeren Schicht von Hoc verarbeiten. Exportstandard React.forwardRef((props, ref) => {
        const Wrapper = React.memo(Inhalt); // Hoc

        // ForwardRef umschließt Wrapper
        // Der Verweis muss an die echte Komponente im Wrapper weitergegeben werden // Ein Props-Attribut im Wrapper hinzufügen und das Ref-Objekt als Props an die untergeordnete Komponente weitergeben return <Wrapper {...props} forwardedRef={ref} />;
      });

  Die zweite Methode ==========

  0. Verwenden Sie eine Requisite, um den Verweis zu speichern, wenn Sie
  1. Übergeben Sie xxx={ref} bei Verwendung // Unterschied zur ersten Methode 2. Binden Sie ref={props.xxx} in die reale Komponente ein

  const Home = (Eigenschaften) => {
    const connectRef = useRef(null);

    zurückkehren (
      <div>
        <Inhalt weitergeleitetRef={connectRef} />
      </div>
    );
  };

  // Definieren Sie eine Komponente höherer Ordnung export const Hoc = (WrappedComponent) => {
    Klasse Wrapper erweitert React.Component {
      rendern() {
        return <WrappedComponent {...props} />
      }
    }
  }

  // Umschlossene Komponente const Content = (props) => {
    zurückkehren (
      <div>
        <input type="Passwort" ref={props.forwardedRef} />
      </div>
    );
  };

  // Verpackungsprozess Export Standard Hoc(Content);

* */

/*
  Verwende die statische Methode der umschlossenen Komponente // Umschlossene Komponente, füge statische Eigenschaften und Methoden hinzu exportiere Standardklasse Header erweitert React.Component {
    statischer Anzeigename = "Kopfzeile";
    statischer ShowName = () => {
      Konsole.log(dieser.Anzeigename);
    };

    rendern() {
      <span>Header</span> zurückgeben
    }
  };

  //HOC
  exportiere Standardfunktion Hoc(WrappedComponent) {
    Rückgabeklasse Wrapper erweitert React.Component {
      rendern() {
        return <WrappedComponent {...this.props} />
      }
    };
  };

  ===========

  // Die Komponente kann nach der Hoc-Verpackung die statische Methode „Import Header“ nicht von „./header“ abrufen.
    importiere Hoc aus „./Hoc“;

    const EnhanceHeader = Hoc(Header);

    Exportieren der Standardfunktion Home() {
      console.log(EnhanceHeader.displayName); // undefiniert
      EnhanceHeader.showName(); // undefiniert

      return <EnhanceHeader />
    }

  =============

  // Lösung 1: Statische Methoden nach HOC kopieren export default function Hoc(WrappedComponent) {
      Rückgabeklasse Wrapper erweitert React.Component {
        static displayName = WrappedComponent.displayName; // Muss wissen, welche statischen Methoden in der gewrappten Komponente enthalten sind static showName = WrappedComponent.showName;

        rendern() {
          return <WrappedComponent {...this.props} />
        }
      };
    };

  ==============

  // Lösung 2: Alle statischen Eigenschaften und Methoden automatisch kopieren. Importieren Sie React von „react“.
    importiere hoistNonReactStatic von „hoist-non-react-statics“;

    exportiere Standardfunktion Hoc(WrappedComponent) {

      Klasse Wrapper erweitert React.Component {
        rendern() {
          return <WrappedComponent {...this.props} />
        }
      };

      hissenNonReactStatic(Wrapper, WrappedComponent);
      Wrapper zurückgeben;
    };

  ==============

    // Lösung 3: Beim Exportieren von Komponenten zusätzliche statische Eigenschaften und Methoden importieren class Header extends React.Component {
        rendern() {
          <span>Header</span> zurückgeben
        }
      };

      const displayName = "Überschrift";

      Funktion zeigeName() {
        Konsole.log(Header.displayName);
      };

      Header.displayName =Anzeigename;
      Header.showName = ShowName;

      Standard-Header exportieren
      export { Anzeigename, Showname }

    // Importieren Sie import Header, { Anzeigename, Showname } aus './header';
      importiere Hoc aus „./Hoc“;

      const EnhanceHeader = Hoc(Header);

      Exportieren der Standardfunktion Home() {
        console.log(Anzeigename); // Header
        showName(); //Überschrift

        return <EnhanceHeader />
      }
* */

/*
  An die umschlossene Komponente übergebene Eigenschaften abfangen, Eigenschaften hinzufügen, löschen und ändern. Standardfunktion Hoc(WrappedComponent) exportieren {

    Rückgabeklasse Wrapper erweitert React.Component {
      rendern() {
        // Filtere einige Props, die nur im aktuellen Hoc verwendet werden, ohne unnötige transparente Übertragung const { forMeProps, forOtherProps } = this.props;

        // Definieren Sie innerhalb dieses HOC zusätzliche Eigenschaften oder Methoden, die in die gewrappte Komponente eingefügt werden müssen const injectProps = some-state-or-method; // Normalerweise Status- oder Instanzmethode // Übergeben Sie Props der oberen Ebene + zusätzliche Props an die gewrappte Komponente
        zurückkehren (
          <Gewickelte Komponente
            injectProps={injectProps} // Übergeben Sie zusätzliche Props, die injiziert werden müssen
            {...forOtherProps} // durchgereichte Requisiten, die mit der Nachverfolgung in Zusammenhang stehen
          />
        )
      }
    }
  }

  z.B
    Hoc erhält ein zusätzliches Props 'dealUpper', wenn wahr, konvertiert es Daten in Großbuchstaben dealUpper wird nur in diesem Hoc verwendet, es besteht also keine Notwendigkeit, es an die gewrappte Komponente weiterzugeben // HOC
  Export-Standardfunktion Hoc(WrappedComponent) {
    Rückgabeklasse Wrapper erweitert React.Component {
      rendern() {
        const { dealUpper, ...forOtherProps } = diese.props;
        const { data } = fürOtherProps;

        wenn (DealUpper) {
          Objekt.Zuweisen(forOtherProps, {data: data.toUpperCase()})
        }

        return <WrappedComponent { ...fürAndereProps } />
      }
    };
  };

  // Exportieren Sie die erweiterte Komponente nach der Hoc-Verpackung. Importieren Sie React von „react“.
  importiere Hoc aus „./Hoc1“;

  Klasse Header erweitert React.Component {
    rendern() {
      Konsole.log(diese.props); // { Daten: 'ABC' }

      geben Sie <span>{this.props.data}</span> zurück
    }
  };

  export default Hoc(Header); // Die gepackte erweiterte Komponente exportieren // Importieren mit „import Header“ aus „./header“;

  const Home = () => {
    Rückgabewert <Header data={'abc'} dealUpper />
  }
* */

/*
  Verwenden Sie HOC, um komplexe gemeinsame Logik zu extrahieren und verschiedene Funktionen in verschiedenen Komponenten zu erweitern. importiere React von „react“;

  export const Hoc = (WrappedComponent, Namespace) => {
    Klasse Wrapper erweitert React.Component {
      Zustand = {
        Daten: []
      }

      // Dieselbe Anforderungsmethode extrahiert componentDidMount = () => {
        const { dispatch } = diese.props;

        versenden({
          Typ: `${namespace}/queryData`, // Dynamisch verschiedene Stores anfordern
          Nutzlast: {},
          Rückruf: res => {
            wenn (res) {
              dies.setState({
                Daten: res.data
              })
            }
          }
        })
      }

      rendern() {
        return <WrappedComponent { ...this.props } Daten = {this.state.data} />
      }
    }
  }

  //Paket A componentimport Hoc von './Hoc';

  const A = ({ Daten }) => {
    ... Lassen Sie die Logik zum Anfordern der Datenrückgabe weg (data.map(item => item));
  }

  exportiere Standard MyHoc(A, 'a');

  //Paket B componentimport Hoc von './Hoc';

  const B = ({ Daten }) => {
    ... Lassen Sie die Logik der Anforderung der Datenrückgabe weg (
      <ul>
        {
          Daten.map((Element, Index) => {
            Rückgabewert <li key={index}><{item}/li>
          }
        }
      </ul>
    )
  }

   exportiere Standard Hoc(B, 'b');
* */

/*
  Unkontrollierte Komponenten in kontrollierte Komponenten umwandeln // Hoc-Komponentenexport-Standardfunktion Hoc(WrappedComponent) {
    Rückgabeklasse Wrapper erweitert React.Component {
      Zustand = {
        Wert: ''
      };

      beiÄnderung = (e) => {
        dies.setState({
          Wert: e.Ziel.Wert
        })
      };

      rendern() {
        const neueProps = {
          Wert: dieser.Zustand.Wert,
          beiÄnderung: dies.beiÄnderung
        };

        return <WrappedComponent {...this.props} {...newProps} />
      }
    };
  };

  // Gewöhnliche Komponentenklasse InputComponent erweitert React.Component {
    rendern() {
      Rückgabewert <input {...this.props} />
    }
  }

  // Exportstandard umschließen Hoc(InputComponent);
* */

/*
  Umgekehrte Vererbung (Verwendung des Status und der Methoden innerhalb der gewrappten Komponente in Hoc)
    - Die umgekehrt geerbte Komponente muss eine Klassenkomponente und keine Funktionskomponente sein. export const Hoc = (WrappedComponent) => {
    Klasse Wrapper erweitert WrappedComponent { // super ≈ dies in WrappedComponent
      rendern() {
        wenn (!this.props.data) {
            zurück <span>wird geladen...</span>
        } anders {
            return super.render() //Rufen Sie die render()-Methode der gewrappten Komponente auf}
      }
    }
  }

  ====

  exportiere Standardfunktion Hoc(WrappedComponent) {
    return Klasse erweitert WrappedComponent {
      rendern() {
        const elementTree = super.render(); // React verwendet Js-Objekte, um die Dom-Baumstruktur zu simulieren. Sie können Daten manipulieren, indem Sie die Eigenschaften von Js-Objekten ändern console.log(elementTree); // Wenn Sie nicht viel über die Struktur darin wissen, können Sie sie ausdrucken + offizielle Website cloneElement(), um mehr zu erfahren const newElementTree = React.cloneElement(elementTree, { children: `Ihr Inhalt wurde entführt` });

        gibt neuenElementBaum zurück;
      }
    };
  };
* */

/*
  Rendering-Hijacking, z. B. Steuern, ob eine Komponente gerendert wird (Sie können einen globalen Ladeeffekt erzielen, das Laden anzeigen, wenn keine Daten vorhanden sind usw.)

    // Grundlegende Implementierung export const LoadingHoc = (WrappedComponent) => {
      Klasse Wrapper erweitert React.Component {
        rendern() {
          wenn (!this.props.data) {
            zurück <span>wird geladen...</span>
          } anders {
            return <WrappedComponent {...this.props} />
          }
        }
      }
    }

    // Umgekehrte Vererbung verwenden, um Export zu implementieren const LoadingHoc = (WrappedComponent) => {
      Klasse Wrapper erweitert WrappedComponent { // super ≈ dies in WrappedComponent
        rendern() {
          wenn (!this.props.data) {
            zurück <span>wird geladen...</span>
       	  } anders {
            return super.render() //Rufen Sie die render()-Methode der gewrappten Komponente auf}
        }
      }
    }

  ======

  zB gerenderten Inhalt kapern Export Standardfunktion Hoc2(WrappedComponent) {
      return class extends WrappedComponent { // Hier wird umgekehrte Vererbung verwendet render() {
          const elementTree = super.render(); // React verwendet Js-Objekte, um die Dom-Baumstruktur zu simulieren. Sie können Daten manipulieren, indem Sie die Eigenschaften von Js-Objekten ändern console.log(elementTree); // Wenn Sie nicht viel über die Struktur darin wissen, können Sie sie ausdrucken + offizielle Website cloneElement(), um mehr zu erfahren const newElementTree = React.cloneElement(elementTree, { children: `Ihr Inhalt wurde entführt` });

          gibt neuenElementBaum zurück;
        }
      };
    };
* */

/*
  Konfigurieren Sie den Wrapper-Namen: Er ist im Debugging-Tool React Developer Tools leichter zu finden. Beispielsweise ist die übergeordnete Komponente Hoc und die umschlossene Komponente WrappedComponent. Der angezeigte Name sollte Hoc(WrappedComponent) sein.


    //Gibt die Standardfunktion des Komponentenexports Hoc(WrappedComponent) zurück {
      return-Klasse erweitert React.Component {
        /*
          statischer Anzeigename = „XXX“; ist in Hoc nicht definiert
            - Der in React Developer Tools angezeigte Name ist „Anonymous“

          statischer Anzeigename = 'XXX'; ist in der gepackten Komponente nicht definiert
            - Der in React Developer Tools angezeigte Name ist undefiniert.

          Definieren Sie static displayName = ‚header‘ in der gepackten Komponente;
            - Der in React Developer Tools angezeigte Name ist Header Hoc
        *\
        statischer Anzeigename = `Hoc(${WrappedComponent.displayName});

        rendern() {
          Geben Sie die Zeichenfolge <WrappedComponent {...this.props} /> zurück.
        }
      };
    }

    //Gibt eine funktionale Komponente zurück export default function Hoc(WrappedComponent) {

      /*
        Rückgabefunktion (Requisiten) {}
          - Der in React Developer Tools angezeigte Name ist „Anonymous“

        Rückgabefunktion Wrapper (Requisiten) {}
          - Der in React Developer Tools angezeigte Name ist Wrapper
      *
      Rückgabefunktion Wrapper (Requisiten) {
        Geben Sie <WrappedComponent {...props} /> zurück;
      };
    }

    =======

    Export-Standardfunktion Hoc(WrappedComponent) {
      const Wrapper = (Eigenschaften) => {
        Geben Sie <WrappedComponent {...props} /> zurück;
      };

      /*
        statischer Anzeigename = 'XXX'; ist in der gepackten Komponente nicht definiert
          - Der in React Developer Tools angezeigte Name ist undefiniert.

        Definieren Sie static displayName = ‚header‘ in der gepackten Komponente;
          - Der in React Developer Tools angezeigte Name ist Header Hoc
      *\
      Wrapper.displayName = `Hoc(${WrappedComponent.displayName})`;

      Wrapper zurückgeben;
    }

    =====


    // Umschlossene Komponente exportiert Standardklasse Header erweitert React.Component {
      statischer Anzeigename = "Kopfzeile";

      rendern() {
        Rückgabewert <span>{ this.props.count }</span>
      }
    };

* */

/*
  Verwenden Sie kein HOC im Render

  z.B
  exportiere Standardklasse Home erweitert React.Component {
    rendern() {
      // Bei jedem Rendern wird ein neuer Wrapper erstellt.
      // Wrapper1 !== Wrapper2
      // Bewirkt, dass die übergeordnete Komponente deinstalliert und neu gemountet wird und der Status verloren geht (z. B. Kontrollkästchenauswahl geht verloren | Status wird gelöscht)
      × const Wrapper = Hoc(WrappedComponent);

      return <Wrapper />
    }
  }

 =========

  √ const Wrapper = myHoc(WrappedComponent);

  exportiere Standardklasse Home erweitert React.Component {
    rendern() {
      return <Wrapper />
    }
  }
* */

/*
  Hoc-Rendering-Reihenfolge Hoc (Header)

    componentDidMount: Header -> HOC
    componentWillUnMount: HOC -> Header
* */

/*
  HOC und Mixin
    HOC
     - Gehört zum Konzept der funktionalen Programmierung - Die umschlossene Komponente kann die Existenz der Komponente höherer Ordnung nicht erkennen - Die von der Komponente höherer Ordnung zurückgegebene Komponente wird auf der ursprünglichen Basis erweitert Mixin
    - Der Mixin-Modus fügt der gewrappten Komponente kontinuierlich neue Eigenschaften und Methoden hinzu - Die gewrappte Komponente kann sie erkennen - Muss verarbeitet werden (Namenskonflikt, Statusverwaltung)
* */