React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

Ein sehr häufiges Szenario in react -Projekten:

const [Uhrwert, setzeUhrwert] = useState('');
const [andererWert1, setzeAnderenWert1] = useState('');
const [andererWert2, setzeAndererWert2] = useState('');

useEffect(() => {
    tuEtwas(andererWert1, andererWert2);
}, [Uhrwert, andererWert1, andererWert2]);

Wir möchten doSomething ausführen, wenn sich watchValue ändert, wodurch auf die anderen Werte otherValue1 und otherValue2 verwiesen wird.

Hier kommt eine beunruhigende Frage:

• Wenn otherValue1 und otherValue2 nicht zum Abhängigkeits-Array hinzugefügt werden, greift doSomething wahrscheinlich auf die alten Variablenreferenzen von otherValue1 und otherValue2 zu, was zu unerwarteten Fehlern führt (wenn hooks -bezogenes eslint installiert ist, wird eine Warnung angezeigt).
• Im Gegenteil, wenn otherValue1 und otherValue2 zum Abhängigkeitsarray hinzugefügt werden, wird doSomething auch ausgeführt, wenn sich diese beiden Werte ändern, was nicht das ist, was wir wollen (wir wollen nur auf ihre Werte verweisen, aber nicht, dass sie doSomething auslösen).

Dieses Problem kann gelöst werden, indem otherValue1 und otherValue2 in ref geändert werden:

const [Uhrwert, setzeUhrwert] = useState('');
const other1 = useRef('');
const other2 = useRef('');

// ref muss nicht zum Abhängigkeits-Array hinzugefügt werden, da die Referenz unverändert bleibt useEffect(() => {
    tuEtwas(anderes1.aktuell, anderes2.aktuell);
}, [Uhrwert]);

Auf diese Weise ändern sich die Variablenreferenzen von other1 und other2 nicht, wodurch das vorherige Problem gelöst wird, jedoch ein neues Problem eingeführt wird: Wenn sich der current Wert von other1 und other2 ändert, wird keine erneute Komponentendarstellung ausgelöst (Änderungen useRef的current lösen keine Komponentendarstellung aus), sodass die Schnittstelle bei einer Wertänderung nicht aktualisiert wird!

Dies ist bei hooks ein Problem. Die Variable useState löst ein erneutes Rendering aus und hält die Schnittstelle auf dem neuesten Stand, aber wenn sie als Abhängigkeit von useEffect verwendet wird, löst sie immer eine unerwünschte Funktionsausführung aus. Die Variable useRef kann sicher als useEffect Abhängigkeit verwendet werden, sie löst jedoch kein Komponenten-Rendering aus und die Schnittstelle wird nicht aktualisiert.
Wie kann man das Problem lösen?

Sie können die Funktionen von useRef und useState kombinieren, um eine neue hooks -Funktion zu erstellen: useStateRef .

importiere { useState, useRef } von "react";

// Benutze das Referenzmerkmal von useRef und behalte dabei die Reaktionsfähigkeit von useState bei. Typ StateRefObj<T> = {
  _Zustand: T;
  Wert: T;
};
Exportieren Sie die Standardfunktion useStateRef<T>(
  Anfangszustand: T | (() => T)
): StateRefObj<T> {
  // Initialisierungswert const [init] = useState(() => {
    wenn (Typ von Anfangszustand === "Funktion") {
      return (Initialstatus als () => T)();
    }
    gib den Anfangszustand zurück;
  });
  // Einen Status festlegen, um die Komponentendarstellung auszulösen const [, setState] = useState(init);
  
  // Beim Lesen des Werts wird der neuste Wert ermittelt // Beim Setzen des Werts wird „setState“ ausgelöst und die Komponente wird gerendert const [ref] = useState<StateRefObj<T>>(() => {
    zurückkehren {
      _state: init,
      Wert einstellen(v: T) {
        dieser._zustand = v;
        setzeZustand(v);
      },
      Wert abrufen() {
        gib diesen Status zurück;
      },
    };
  });
  
  // Zurückgegeben wird eine Referenzvariable, die während des gesamten Lebenszyklus der Komponente unverändert bleibt return ref;
}

Wir können es also folgendermaßen verwenden:

const watch = useStateRef('');
const other1 = useStateRef('');
const other2 = useStateRef('');

// Ändern Sie den Wert wie folgt: watch.value = "new";

useEffect(() => {
    tuEtwas(anderer1.Wert, anderer2.Wert);
   // Tatsächlich sind diese drei Werte jetzt Referenzvariablen, die während des gesamten Lebenszyklus der Komponente unverändert bleiben, sodass keine Abhängigkeitsarrays hinzugefügt werden müssen. // Das eslint-Plugin von React-Hooks kann useRef jedoch nur als Referenz erkennen. Wenn es nicht hinzugefügt wird, wird es die Leute warnen. Aus Sicherheitsgründen wird es dennoch hinzugefügt. }, [watch.value, other1, other2]);

Auf diese Weise verfügen watch, other1 und other2 über die Referenzfunktion von useRef und lösen keine unnötige Ausführung von doSomething aus. Durch die Reaktionsfähigkeit von useState wird durch die Änderung von .value die Komponentendarstellung und Schnittstellenaktualisierungen ausgelöst.
Wenn wir möchten, dass die Variablenänderung doSomething auslöst, fügen wir watch.value zum Abhängigkeits-Array hinzu. Wenn wir lediglich auf den Wert verweisen möchten und nicht möchten, dass dieser doSomething auslöst, fügen wir die Variable selbst dem Array hinzu.

Oben finden Sie die Details der React-Tipps, wie Sie die Probleme der Hook-Abhängigkeit beseitigen können. Weitere Informationen zur React-Hook-Abhängigkeit finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!