ReactJS - Komponenten höherer Ordnung

Komponenten höherer Ordnung sind JavaScript-Funktionen, mit denen der vorhandenen Komponente zusätzliche Funktionen hinzugefügt werden. Diese Funktionen sindpureDies bedeutet, dass sie Daten empfangen und Werte gemäß diesen Daten zurückgeben. Wenn sich die Daten ändern, werden Funktionen höherer Ordnung mit unterschiedlicher Dateneingabe erneut ausgeführt. Wenn wir unsere zurückkehrende Komponente aktualisieren möchten, müssen wir den HOC nicht ändern. Alles was wir tun müssen, ist die Daten zu ändern, die unsere Funktion verwendet.

Higher Order Component(HOC) umschließt die "normale" Komponente und bietet zusätzliche Dateneingabe. Es ist eigentlich eine Funktion, die eine Komponente nimmt und eine andere Komponente zurückgibt, die die ursprüngliche umschließt.

Schauen wir uns ein einfaches Beispiel an, um zu verstehen, wie dieses Konzept funktioniert. DasMyHOC ist eine Funktion höherer Ordnung, die nur zum Übergeben von Daten an verwendet wird MyComponent. Diese Funktion benötigtMyComponent, verbessert es mit newData und gibt die erweiterte Komponente zurück, die auf dem Bildschirm gerendert wird.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Wenn wir die App ausführen, werden wir sehen, dass Daten an übergeben werden MyComponent.

Note- Komponenten höherer Ordnung können für verschiedene Funktionen verwendet werden. Diese reinen Funktionen sind die Essenz der funktionalen Programmierung. Sobald Sie sich daran gewöhnt haben, werden Sie feststellen, dass Ihre App einfacher zu warten oder zu aktualisieren ist.