Vor- und Nachteile von React Hooks

Vorwort

Hooks sind eine neue Funktion in React 16.8. Es ist völlig optional und 100 % abwärtskompatibel. Es ermöglicht Ihnen, Funktionskomponenten, Klassenkomponenten und andere Funktionen von React zu verwenden, wie z. B. Statusverwaltung, Lebenszyklus-Hooks usw. Konzeptionell ähnelten React-Komponenten schon immer eher Funktionen. Hooks umfassen Funktionen, ohne den Geist von React zu opfern.

Vorteil:

1. Der Code ist besser lesbar. Die Codelogik derselben Funktion war ursprünglich in verschiedene Lebenszyklusfunktionen aufgeteilt, was es für Entwickler schwierig machte, sie zu warten und zu iterieren. React Hooks können die Funktionscodes aggregieren, um sie leichter lesen und warten zu können. Beispielsweise enthält jeder Lebenszyklus oft eine unabhängige Logik. Im Allgemeinen erhalten wir Daten in componentDidMount und componentDidUpdate. Allerdings kann dasselbe componentDidMount auch eine Menge anderer Logik enthalten, wie etwa das Einrichten von Ereignis-Listenern, die dann in componentWillUnmount gelöscht werden müssen. Code, der miteinander in Zusammenhang steht und parallel geändert werden muss, wird getrennt, während Code, der überhaupt nichts damit zu tun hat, in derselben Methode kombiniert wird. Dies kann leicht zu Fehlern und logischen Inkonsistenzen führen.
2. Die Hierarchie des Komponentenbaums wird flacher. Im Originalcode verwenden wir häufig HOC/Render-Props und andere Methoden, um Komponentenzustände wiederzuverwenden, Funktionen zu verbessern usw., was zweifellos die Anzahl der Komponentenbaumebenen und das Rendering erhöht. Wenn Sie React-Anwendungen in React DevTools beobachten, werden Sie feststellen, dass Komponenten, die aus Anbietern, Verbrauchern, Komponenten höherer Ordnung, Render-Props und anderen abstrakten Ebenen bestehen, eine „verschachtelte Hölle“ bilden. In React Hooks können diese Funktionen durch leistungsstarke benutzerdefinierte Hooks implementiert werden.
3. Es besteht keine Notwendigkeit, darüber nachzudenken, worauf dies hinweist. Bei Klassenkomponenten muss man verstehen, wie das in JavaScript funktioniert.

Mangel:

1. Responsive NutzungEffekt

Beim Schreiben von Funktionskomponenten müssen Sie einige Schreibgewohnheiten ändern. Sie müssen sich darüber im Klaren sein, wann sich das „Abhängigkeitsarray“ von useEffect und useCallback in Ihrem Code ändert. Manchmal hängt Ihr useEffect von der Unveränderlichkeit einer Funktion ab und die Unveränderlichkeit dieser Funktion hängt von der Unveränderlichkeit einer anderen Funktion ab, wodurch eine Abhängigkeitskette entsteht. Sobald ein Knoten in dieser Abhängigkeitskette versehentlich geändert wird, wird Ihr useEffect versehentlich ausgelöst. Wenn Ihr useEffect eine idempotente Operation ist, kann dies zu Leistungsproblemen führen. Wenn es nicht idempotent ist, wird es schrecklich sein.

Daher stellt useEffect im Vergleich zu componentDidmount und componentDidUpdate eine größere mentale Belastung dar.

2. Der Status ist nicht synchronisiert

Funktionen werden unabhängig ausgeführt und jede Funktion hat einen unabhängigen Umfang. Die Variablen der Funktion werden im Laufzeitbereich gespeichert. Bei asynchronen Vorgängen stoßen wir häufig darauf, dass die Variablenreferenz des asynchronen Rückrufs die vorherige ist, also die alte (was hier auch als Abschluss verstanden werden kann). Beispielsweise das folgende Beispiel:

importiere React, { useState } von "react";
​
const Zähler = () => {
  const [Zähler, setzeZähler] = useState(0);
​
  const onAlertButtonClick = () => {
    setzeTimeout(() => {
      alert("Wert: " + Zähler);
    }, 3000);
  };
​
  zurückkehren (
    <div>
      <p>Sie haben {counter} Mal geklickt.</p>
      <button onClick={() => setCounter(counter + 1)}>Klick mich</button>
      <button onClick={beiAlertButtonClick}>
        Zeigen Sie mir den Wert in 3 Sekunden
      </button>
    </div>
  );
};
​
Standardzähler exportieren;

Wenn Sie auf „Zeigen Sie mir den Wert in 3 Sekunden“ und dann auf „Klicken Sie mich“ klicken, ändert sich der Wert des Zählers von 0 auf 1. Drei Sekunden später wird der Timer ausgelöst, aber die Warnung zeigt 0 (alter Wert) an, wir möchten jedoch, dass der aktuelle Status 1 ist.

Bei Klassenkomponenten tritt dieses Problem nicht auf, da die Eigenschaften und Methoden von Klassenkomponenten in einer Instanz gespeichert sind und die aufrufenden Methoden this.state.xxx und this.method() sind. Da der Wert jedes Mal aus einer unveränderten Instanz übernommen wird, gibt es kein Problem mit alten Referenzen.

Um dieses Hook-Problem zu lösen, können Sie auch auf die Instanz der Klasse verweisen. Das von useRef zurückgegebene unveränderliche RefObject (die aktuelle Eigenschaft ist veränderlich) wird zum Speichern des Status verwendet und die Methode für den Wertzugriff wird von counter in counterRef.current geändert. wie folgt:

importiere React, { useState, useRef, useEffect } von „react“;
​
const Zähler = () => {
  const [Zähler, setzeZähler] = useState(0);
  const ZählerRef = useRef(Zähler);
​
  const onAlertButtonClick = () => {
    setzeTimeout(() => {
      alert("Wert: " + counterRef.current);
    }, 3000);
  };
​
  useEffect(() => {
    ZählerRef.current = Zähler;
  });
​
  zurückkehren (
    <div>
      <p>Sie haben {counter} Mal geklickt.</p>
      <button onClick={() => setCounter(counter + 1)}>Klick mich</button>
      <button onClick={beiAlertButtonClick}>
        Zeigen Sie mir den Wert in 3 Sekunden
      </button>
    </div>
  );
};
​
Standardzähler exportieren;

Das Ergebnis entspricht unseren Erwartungen, die Warnung hat derzeit den Wert 1.

So vermeiden Sie häufige Probleme mit React-Hooks

• Schreiben Sie nicht zu viele Abhängigkeiten in useEffect, sondern teilen Sie diese Abhängigkeiten in mehrere useEffects mit Einzelfunktionen auf. Tatsächlich folgt dies dem „Single Responsibility-Modell“ des Softwaredesigns.
• Wenn bei Ihnen Probleme mit nicht synchronisierten Zuständen auftreten, können Sie die Parameter auch manuell an die Funktion übergeben. wie:

   // Die Anzahl von showCount stammt aus dem übergeordneten Bereich const [count,setCount] = useState(xxx); 
   Funktion showCount(){ console.log(Anzahl) } 

   // Die Anzahl von showCount kommt vom Parameter const [count, setCount] = useState(xxx); 
   Funktion showCount(c){ console.log(c) }

Dies löst jedoch nur einen Teil des Problems und oft müssen Sie die oben erwähnte useRef-Lösung verwenden.

3. Beachten Sie die Warnungen des Plugins eslint-plugin-react-hooks.

4. Verwenden Sie für komplexe Geschäftsprozesse Komponenten statt Hooks.

Oben finden Sie detaillierte Informationen zu den Vor- und Nachteilen von React-Hooks. Weitere Informationen zu den Vor- und Nachteilen von React-Hooks finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!