Drei Möglichkeiten zum Teilen der Komponentenlogik in React

Ohne weitere Umschweife sind dies diese drei Methoden: Render-Props, Komponenten höherer Ordnung und benutzerdefinierte Hooks. Das Folgende zeigt

Angenommen, es gibt eine TimeOnPage-Komponente, die speziell dafür vorgesehen ist, die Zeit aufzuzeichnen, die ein Benutzer auf der aktuellen Seite verbringt, etwa so:

const TimeOnPage = () => {
 const [Sekunde, setSecond] = useState(0);

 useEffect(() => {
  setzeTimeout(() => {
   setSecond(Sekunde + 1);
  }, 1000);
 }, [zweite]);
 zurückkehren (
  <div>Verweildauer: {second} Sekunden</div>
 );
}

Wenn eine andere Komponente diese Funktionalität wiederverwenden muss, können wir sie kapseln, sodass sie problemlos mit anderen Komponenten geteilt werden kann?

Es ist naheliegend, an verschachtelte Unterkomponenten zu denken und Props zum Übergeben von Parametern zu verwenden.

const Child = (Eigenschaften) => {
 return <div>Aufenthaltszeit: {props.stayTime}s</div>;
};

const TimeOnPage = () => {
 const [Sekunde, setSecond] = useState(0);

 useEffect(() => {
  setzeTimeout(() => {
   setSecond(Sekunde + 1);
  }, 1000);
 }, [zweite]);
 zurückkehren (
  <div>
   <Untergeordnete Aufenthaltszeit={Sekunde} />
  </div>
 );
}

Dies ist in der TimeOnPage-Komponente fest codiert und hat das Ziel der Kapselung und Wiederverwendung noch nicht erreicht. Sehen Sie, wie Render-Requisiten funktionieren?

Render-Requisiten

„Render-Prop“ bezieht sich auf eine einfache Technik zum Teilen von Code zwischen React-Komponenten mithilfe eines Props, dessen Wert eine Funktion ist.

Als Fortsetzung des vorherigen Artikels definieren Sie eine Eigenschaft mit einem Funktionswert in TimeOnPage. Wenn Sie eine Komponente rendern möchten, geben Sie sie einfach in der Funktion zurück. Der Funktionsparameter ist der Status, den Sie teilen möchten.

const Child = (Eigenschaften) => {
 return <div>Aufenthaltszeit: {props.stayTime}s</div>;
};

const TimeOnPage = (Eigenschaften) => {
 const [Sekunde, setSecond] = useState(0);

 useEffect(() => {
  setzeTimeout(() => {
   setSecond(Sekunde + 1);
  }, 1000);
 }, [zweite]);
 return <div>{props.render(Sekunde)}</div>;
};

<TimeOnPage render={(Aufenthaltszeit) => <Untergeordnete Aufenthaltszeit={Aufenthaltszeit} />

Tatsächlich ist die Render-Eigenschaft eine Funktions-Eigenschaft, die verwendet wird, um der Komponente mitzuteilen, welcher Inhalt gerendert werden muss.
Auch React Router verwendet diese Technik.

<Router>
 <Route path="/home" render={() => <div>Startseite</div>} />
</Router>

Komponenten höherer Ordnung

Higher-Order-Komponenten (HOC) sind eine fortgeschrittene Technik zur Wiederverwendung der Komponentenlogik in React. HOC selbst ist nicht Teil der React-API, sondern ein Entwurfsmuster, das auf den Kompositionseigenschaften von React basiert.

Eine höherwertige Komponente ist eine Funktion, deren Parameter eine wiederzuverwendende Komponente A ist und deren Rückgabewert eine neue Komponente N ist. Die neue Komponente N wird auf Basis der Komponente A verarbeitet, die Komponente A selbst wird dabei jedoch nicht verändert, lediglich die Funktion wird erweitert.

Angenommen, es gibt eine Nachrichtenlistenkomponente, die folgendermaßen aussieht:

const NewList = () => {
 zurückkehren (
  <div>
   <ul>
    <li>Neuigkeit</li>
    <li>Neuigkeit</li>
   </ul>
  </div>
 );
}

Wenn Sie die Ladeanimationskomponente <Loading /> während des Ladens der Nachrichtenliste anzeigen möchten, tun Sie dies normalerweise

const Laden = () => {
 // Animation wird geladen}
const NewList = ({ isLoading }) => {
 gibt „isLoading“ zurück? (
  <Wird geladen />
 ) : (
  <div>
   <ul>
    <li>Neuigkeit</li>
    <li>Neuigkeit</li>
   </ul>
  </div>
 );
};

Nehmen wir nun an, dass die Tabellenkomponente auch die Ladeanimationskomponente während des Ladens der Daten anzeigen möchte, und zwar nach einem ähnlichen Muster

const Laden = () => {
 // Animation wird geladen}
const DataList = ({ isLoading, ...props }) => {
 gibt „isLoading“ zurück? (
  <Wird geladen />
 ) : (
  <Tabelle {...Requisiten} />
 );
};

Aus dem Obigen können Sie erkennen, dass die Strukturen von DataList und NewList sehr ähnlich sind. Wenn dritte und vierte Komponenten geladen werden müssen, wiederholen wir dieses Muster dann noch ein drittes und viertes Mal? Dies ist nicht der ideale Ansatz. Ein besserer Ansatz besteht darin, eine Komponente höherer Ordnung zu verwenden, um dieses Muster zu abstrahieren:

const MitLoading = (WrappedComponent) => {
 return ({wird geladen, ...Eigenschaften}) => {
  gibt zurück, dass geladen wird? <Wird geladen /> : <WrappedComponent {...props} />;
 }
};

Dann können Sie das Laden separat hinzufügen, ohne NewList und DataList zu ändern

const NewList = () => {
 zurückkehren (
  <div>
   <ul>
    <li>Neuigkeit</li>
    <li>Neuigkeit</li>
   </ul>
  </div>
 );
};

const DataList = (Eigenschaften) => {
 return <Tabelle {...Eigenschaften} />
};

const MitLoading = (WrappedComponent) => {
 return ({wird geladen, ...Eigenschaften}) => {
  gibt zurück, dass geladen wird? <Wird geladen /> : <WrappedComponent {...props} />;
 }
};
// NewList mit Laden
const WithLoadingNewList = WithLoading(<NewList />)
// DataList mit Laden
const WithLoadingDataList = WithLoading(<DataList />)

Benutzerdefinierte Haken

Hooks sind eine neue Funktion in React 16.8. Es ermöglicht Ihnen, Status und andere React-Funktionen zu verwenden, ohne Klassen zu schreiben.

React Hooks umfassen useState, useEffect usw. Sie alle sind Funktionen. Custom Hook ist auch eine Funktion. Sein Name beginnt ebenfalls mit use. Andere Hooks können innerhalb der Funktion aufgerufen werden. Im Gegensatz zu React-Komponenten müssen benutzerdefinierte Hooks keinen Wert zurückgeben. Im Gegensatz zu gewöhnlichen Funktionen können benutzerdefinierte Hooks andere Hooks aufrufen, während dies bei gewöhnlichen Funktionen nicht möglich ist.

Beim Schreiben der Geschäftslogik werden einige wiederverwendbare Methoden im Allgemeinen als Toolfunktionen definiert, die dann überall wiederverwendet werden können. In ähnlicher Weise können Sie durch die Anpassung von Hooks die Komponentenlogik in wiederverwendbare Funktionen extrahieren. Ob Sie einen benutzerdefinierten Hook oder eine Tool-Funktion wählen, hängt davon ab, ob die zu extrahierende Komponentenlogik andere Hooks erfordert. Wenn ja, wählen Sie einen benutzerdefinierten Hook, andernfalls verwenden Sie einfach eine Tool-Funktion.

Gehen Sie zurück zur ersten TimeOnPage-Komponente in diesem Artikel und ändern Sie sie in einen benutzerdefinierten Hook

const useTimeOnPage = () => {
 const [Sekunde, setSecond] = useState(0);

 useEffect(() => {
  setzeTimeout(() => {
   setSecond(Sekunde + 1);
  }, 1000);
 }, [zweite]);
 als Zweites zurückkehren;
}

Anwendung

const Demo = () => {
 const stayTime = useTimeOnPage();
 return <div>Aktuelle Seitenverweildauer: {stayTime} Sekunden</div>
}

Zusammenfassen

Für die drei Möglichkeiten zum Teilen der Komponentenlogik gelten eigene Anwendungsszenarien:
Render-Requisiten eignen sich zum Teilen von übergeordneten Komponenten mit verschiedenen Unterkomponenten/Unterelementen. Die „Pits“ von Unterkomponenten/Unterelementen wurden definiert und können nur an den angegebenen Positionen gerendert werden;
Höherwertige Komponenten eignen sich dazu, Komponenten zu erweitern, ohne die ursprünglichen Komponenten zu verändern;
Reine Funktionen können grundsätzlich dasselbe wie benutzerdefinierte Hooks, manchmal ist es jedoch bequemer und schneller, benutzerdefinierte Hooks zu verwenden.
Link zu diesem Artikel: Github

Damit ist dieser Artikel über die drei Möglichkeiten zum Teilen der Komponentenlogik in React abgeschlossen. Weitere Inhalte zur geteilten Komponentenlogik von React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!