Dynamische Ableitungen und ihre Art, useEffect zu töten

Der Titel ist ein kleiner „Klick-Köder“, aber die Idee ist nicht falsch.

Ich bin nicht der Meinung, dass useEffect ein schlechter Hook ist, im Gegenteil. Aber in React, das als Ableitungsmaschine fungiert, ist die Verwendung von useEffect für die Zustandssynchronisierung nicht die beste Option und wird vom Kernteam auch nicht empfohlen.

Aber warten Sie, und wenn ich den Fall habe, dass ich einen Status synchronisieren muss?

Ja, das kommt sehr selten vor und vielleicht gibt es bessere Lösungsmöglichkeiten, aber stellen Sie sich vor, wir haben einen Beitrag in einer App und möchten einen lokalen Status haben, um optimistische Updates zu verarbeiten, wenn der Benutzer auf die Schaltfläche „Gefällt mir“ klickt, aber das ist es Synchronisiert mit dem externen Status (vom Backend), um wirklich zu wissen, ob etwas Ähnliches passiert ist.

Veränderliche Ableitungen

In diesem Fall benötigen wir ein Grundelement, mit dem wir gleichzeitig Zustand und Ableitung durchführen können. Konzeptionell können wir es uns als eine veränderliche Ableitung vorstellen. Ryan Carniato hat einen guten Blog-Beitrag darüber geschrieben, aber es gibt einige Einschränkungen im Zusammenhang mit der React-Methode zur Verwaltung der Reaktivität, aber dieses neue Grundelement wäre Ableitung und Zustand in nur einem:
Ableitung als Standardverhalten, wobei die letzte aktualisierte Quelle der Wahrheit (die Datenquelle, die vom Server kommt) abgerufen wird.
Geben Sie an, wann der Benutzer auf die Schaltfläche „Gefällt mir“ klickt. Diese Änderung ist vorübergehend und wird bei der nächsten Abhängigkeitsänderung überschrieben.

Wir haben es natürlich nicht auf React, aber wir können uns so ein Primitiv vorstellen. Die positiven Punkte daran:

• Es entfernt einen weiteren Anwendungsfall aus useEffect.
• Es macht deutlich, dass wir eine Ableitung haben, die als Zustand behandelt werden kann.

useMemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);

Der Hook akzeptiert zwei Argumente wie ein normales useMemo, wobei das erste die Memo-Funktion ist, die normalerweise beim ersten Mal ausgeführt wird. Der zurückgegebene Wert ist der Status. Das zweite Argument ist das bekannte Array von Abhängigkeiten, um die Werte im Auge zu behalten und das Memo bei Bedarf neu zu berechnen. Es gibt ein Tupel mit zwei Werten zurück, dem Status-/Memo-Wert und dem Setter, der den Status vorübergehend ändern würde.

Die Verwendung des Hakens würde wie in diesem Beispiel aussehen:

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    

      
name: {internalState?.title}
      
{internalState?.like ? "liked post" : "not liked post"}
       {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button
    
  )
}

Auf diese Weise entfällt hier die Notwendigkeit eines useEffects, da Sie genau wissen, was dieser Hook tut und wozu er in der Lage ist, und Sie füllen diese konzeptionelle Lücke, in der unser Problem gleichzeitig einen Zustand und eine Ableitung benötigt. Ironischerweise entfällt dadurch die Notwendigkeit einer Wirkung.

Wie können wir in React etwas Ähnliches tun?

Um die React-Regeln zu befolgen und den Hook sicher zu halten, müssen wir useEffect verwenden, um im heutigen React etwas Ähnliches zu erstellen. Ich glaube nicht, dass so ein Haken in Zukunft hergestellt wird, aber wer weiß, oder?

Um die Verwendung von useEffect hier zu vermeiden, müssen wir externen Code wie eine Mini-Statusbibliothek verwenden, um damit umzugehen, oder, wenn wir strikte React-Primitive beibehalten möchten, useRef verwenden, um die Werte synchron zu halten.

Das Problem bei diesem Ansatz besteht darin, dass er gegen die React-Regeln verstößt und in der Dokumentation nicht empfohlen wird. Denn die einzige Möglichkeit, ohne den Effekt zu funktionieren, wäre, die Refs während des Renderns der Komponente zu synchronisieren, was überhaupt nicht sicher ist.

Um es einfach und sicher zu halten, wäre ein Beispiel für einen Haken so:

const [internalState, setInternalState] = useMemoState(() => data, [data]);

Das obige ist der detaillierte Inhalt vonDynamische Ableitungen und ihre Art, useEffect zu töten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!