Sie kennen die Ableitung von React nicht

React Hooks wurde vor 6 Jahren veröffentlicht, aber bis heute können wir beobachten, dass selbst von erfahrenen React-Ingenieuren Fehler begangen werden. In der neuesten Version der React-Dokumente hat das Kernteam große Anstrengungen unternommen, um die falschen Anwendungsfälle von useEffect zu lehren, aber in realen Projekten treten weiterhin Fehler auf.

In diesem Beitrag versuchen wir einen anderen Ansatz. Lassen Sie uns die React-Beziehung mit der Ableitung verstehen und warum Sie mehr davon verwenden sollten.

Reaktivität

Reagieren ist nicht vollständig reaktiv, aber am Ende ist es für den Entwickler, der Apps erstellt, nicht so wichtig. Der Unterschied besteht darin, dass der grobkörnige Ansatz, den React verfolgt, die Notwendigkeit von erneuten Renderings mit sich bringt, um wirklich zu identifizieren, welche Änderungen der Zustandsübergang verursacht hat.

Denken Sie also an eine einfache React-Komponente wie diese:

function Example() {
  const [count, setCount] = useState(0)
  const text = `count is ${count}`;

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      {text}
    </button>
  );
}

Wenn wir den Zählstatus ändern, indem wir setCount aufrufen, aktualisieren wir den Statuswert und planen ein erneutes Rendern. In Ordnung, React rendert diese Komponente erneut und ruft sie erneut auf. Wenn ich in diesem Moment React frage, was sich am Rendering geändert hat, wie sollte die Antwort lauten?

Wahrscheinlich ein bescheidenes „Ich weiß nicht“.

React verfolgt seinen Zustand nicht mit einer komplexen Datenstruktur, die seine Abhängigkeiten verwaltet, wie dies bei anderen feinkörnigen reaktiven Bibliotheken der Fall ist. React muss die Komponente erneut aufrufen. In diesem neuen Aufruf wird die erstellte Zählkonstante den neuen Wert haben, und darüber erstellen wir eine neue Konstante mit der Zeichenfolge, zum Beispiel „count is 1“, wenn der Zählwert auf 1 geändert wurde.

Dann generiert JSX seine Struktur mit einer Änderung, der innere Text der Schaltfläche ist nicht „Anzahl ist 1“, React führt den Abgleichsprozess durch, identifiziert diese Änderung und wendet sie auf das echte DOM an. Offensichtlich, oder?

Wenn ich React in diesem Moment frage, was sich geändert hat, wird es wahrscheinlich antworten: „Der Schaltflächentext aus der Beispielkomponente“.

Aber Moment, was ist mit der Textkonstante? Es hat sich auch geändert. Warum ist es nur wichtig, welche Struktur es geschaffen hat? Für React spielen die Variablen und Konstanten, die Sie intern erstellt haben, keine Rolle. Was zählt, sind die Zustandsänderungen und dann die Rückkehr des Komponentenaufrufs.

Alles in der Mitte ist Teil des Prozesses zur Erstellung der Ansichtsstruktur. Natürlich können sich all diese Daten auf die Rückgabe von JSX auswirken, und das ist der Sinn des React-Modells, das sich um das Ergebnis der Komponentenaufrufe kümmert und das DOM entsprechend mit der Ansicht aktualisiert.

Sie haben die Vereinfachung des React-Modells wahrscheinlich wie folgt gesehen:

function Example() {
  const [count, setCount] = useState(0)
  const text = `count is ${count}`;

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      {text}
    </button>
  );
}

Ansicht als Ergebnis der Funktion des Staates. In diesem Fall handelt es sich bei der Ansicht um eine Ableitung, die sich je nach Status ändert. Für diesen Begriff und die internen Komponentendaten ist also React eine Ableitungsmaschine.

Ableitungsmaschine

Alle Variablen und Konstanten, die Sie in einer Komponente erstellt haben, bleiben während dieses Komponentenaufrufs aktiv. In dem Beispiel, das wir oben verwendet haben, wurde bei jedem erneuten Rendern von Beispielkomponenten ein neuer konstanter Text erstellt. Wenn ich einen neuen Wert basierend auf einigen Requisiten oder Zuständen benötige, wird einfach eine neue Variable erstellt, die diese Zustände und Requisiten in der Berechnung verwendet.

React erstellt Ableitungen standardmäßig automatisch.

Nehmen wir ein Beispiel aus React-Dokumenten:

view= f(state)

Wir haben hier einige Probleme. Zunächst einmal die Natur eines Staates.

Warum brauchen wir einen solchen Lokalstaat in einer App? Um die Daten zu behalten und dem Benutzer die Möglichkeit zu geben, sie zu ändern. Der fullName-Status wird nicht vom Benutzer, sondern vom useEffect geändert. Es nutzt andere Zustände, um einen neuen Wert zu schaffen. Auch in React kann jede Variable und Konstante, die wir intern in der Komponente erstellen, die Zustände und Requisiten verwenden, um ihren Wert zu berechnen: eine Ableitung, das Standardverhalten von React.

Bei diesem Beispiel gibt es ein weiteres Problem bezüglich der Laufzeit. In diesem Fall ist der fullName-Wert beim ersten Rendern eine leere Zeichenfolge. React ruft die Rückgabe des JSX dieser Komponente ab, rendert sie auf der Benutzeroberfläche, folgt dem Browser-Malvorgang und ruft anschließend die useEffects der Komponenten auf. In diesem Moment haben wir den setfullName-Aufruf, der ein neues erneutes Rendern plant. React ruft die Komponente erneut auf, jetzt mit dem vollständigen Namen Taylor Swift, und aktualisiert dann die Benutzeroberfläche mit dem neuen Textwert.

In Bezug auf die Laufzeit führen Sie zwei Renderings durch, eines davon unnötig, mit falschen Daten. Im Hinblick auf Leistung und Stabilität ist es schlechter, da der Benutzer den Wert als leer sieht und es als visuellen Fehler wahrgenommen werden kann.

Wenn wir also dem React-Ableitungsmodell folgen, können wir es einfach ändern in:

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  // ? Avoid: redundant state and unnecessary Effect
  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);

  //...
  return <span>{fullName}</span>;
}

Jetzt haben wir nur noch 1 Rendering und vermeiden so das unnötige. Und wir werden die Verwendung des Effekts vermeiden, indem wir einfach eine Ableitung verwenden. Dies wird bei jedem erneuten Rendern mit der neuesten Version der Statuswerte aktualisiert.

Aber ist die Berechnung zu teuer? Oder wenn ich zu viele Bundesstaaten habe und den vollständigen Namen aktualisieren möchte, sobald sich Vorname oder Nachname ändert?

Richtig, in diesem Fall verwenden Sie einfach useMemo und fügen das gleiche Array von Abhängigkeiten hinzu, das Sie für useEffect verwendet haben. Das Memoisierungsmodell von React ist lediglich eine Möglichkeit, das Standardverhalten zu vermeiden, das darin besteht, bei jedem erneuten Rendern eine neue Ableitung zu erstellen. Mit useMemo verfolgen Sie manuell die Zustände und Requisiten und erstellen die Ableitung einfach erneut, wenn sich einige davon geändert haben.

Was ist mit useEffect?

useEffect ist für die externe Synchronisierung bei Wertänderungen erforderlich. Bei der UI-Entwicklung gibt es nur sehr wenige seltene Fälle, in denen dies sinnvoll ist, da normalerweise externe Änderungen, wie z. B. Server-API-Aufrufe, bei Benutzeraktionen erfolgen (wir erstellen übrigens Benutzeroberflächen). Dies geschieht bei Event-Handlern, nicht in einem useEffect.

Wenn Sie useEffect verwenden, um einen Status zu aktualisieren, können Sie wahrscheinlich dieselbe Aktualisierung mithilfe der Ableitung durchführen und so alle zuvor genannten Probleme vermeiden.

Wenn die Ableitung nicht funktioniert, Sie einen der wenigen konkreten Fälle haben oder etwas mit dem Design des Staates oder mit der Lösung selbst nicht stimmt. Das ist kein Problem, aber in diesen Fällen ist es besser, die Komponente zu überprüfen und zukünftige Probleme mit dem Komponentencode zu vermeiden.

Das sind die Grundlagen zur Ableitung in React, aber uns fehlt hier etwas.

Was passiert, wenn ich eine asynchrone Ableitung durchführen muss, wie eine einfache GET-Anfrage, die einen Status als Parameter verwendet und jedes Mal neu berechnet werden muss, wenn sich der Status ändert?

Dies ist ein Thema für den nächsten Beitrag.

Wir sehen uns!

Das obige ist der detaillierte Inhalt vonSie kennen die Ableitung von React nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!