React Hooks – Was passiert unter der Haube?

Lesezeit: 3 Minuten

Benutzeravatar von jonhobbs
Jonhobbs

Ich habe React Hooks ausprobiert und sie scheinen Dinge wie das Speichern von Zuständen zu vereinfachen. Sie scheinen jedoch viele Dinge magisch zu tun, und ich kann keinen guten Artikel darüber finden, wie sie tatsächlich funktionieren.

Das erste, was magisch zu sein scheint, ist, wie der Aufruf einer Funktion wie useState() dazu führt, dass Ihre Funktionskomponente jedes Mal neu gerendert wird, wenn Sie die von ihr zurückgegebene setXXX-Methode aufrufen?

Wie fälscht so etwas wie useEffect() eine componentDidMount, wenn funktionale Komponenten nicht einmal die Fähigkeit haben, Code beim Mounten/Unmounten auszuführen?

Wie bekommt useContext() eigentlich Zugriff auf den Kontext und woher weiß es überhaupt, welche Komponente es aufruft?

Und das deckt noch nicht einmal ansatzweise alle Hooks von Drittanbietern ab, die bereits auftauchen, wie useDataLoader, mit dem Sie Folgendes verwenden können …

const { data, error, loading, retry } = useDataLoader(getData, id)

Wie rendern Daten, Fehler, Laden und Wiederholen Ihre Komponente erneut, wenn sie sich ändern?

Entschuldigung, viele Fragen, aber ich denke, die meisten von ihnen können in einer Frage zusammengefasst werden, die lautet:

Wie erhält die Funktion hinter dem Hook tatsächlich Zugriff auf die funktionale/zustandslose Komponente, die sie aufruft, damit sie sich zwischen dem erneuten Rendern an Dinge erinnern und ein erneutes Rendern mit neuen Daten initiieren kann?

Benutzeravatar von Estus Flask
Estus-Kolben

React Hook nutzt den verborgenen Zustand einer Komponente, er wird in a gespeichert Faserist eine Faser eine Entität, die einer Komponenteninstanz entspricht (im weiteren Sinne, da funktionale Komponenten keine Instanzen als Klassenkomponenten erstellen).

Es ist der React-Renderer, der einem Hook den Zugriff auf den jeweiligen Kontext, Status usw. ermöglicht, und übrigens ist es der React-Renderer, der die Komponentenfunktion aufruft. So kann es Komponenteninstanzen Hook-Funktionen zuordnen, die innerhalb der Komponentenfunktion aufgerufen werden.

Dieser Ausschnitt erklärt, wie es funktioniert:

let currentlyRenderedCompInstance;
const compStates = new Map(); // maps component instances to their states
const compInstances = new Map(); // maps component functions to instances

function useState(initialState) {
  if (!compStates.has(currentlyRenderedCompInstance))
    compStates.set(currentlyRenderedCompInstance, initialState);

  return [
    compStates.get(currentlyRenderedCompInstance) // state
    val => compStates.set(currentlyRenderedCompInstance, val) // state setter
  ];
}

function render(comp, props) {
  const compInstanceToken = Symbol('Renderer token for ' + comp.name);

  if (!compInstances.has(comp))
    compInstances.set(comp, new Set());

  compInstances.get(comp).add(compInstanceToken);

  currentlyRenderedCompInstance = compInstanceToken;

  return { 
    instance: compInstanceToken,
    children: comp(props)
  };
}

Ähnlich wie useState kann auf das aktuell gerenderte Komponenteninstanz-Token durch zugreifen currentlyRenderedCompInstanceandere integrierte Hooks können dies ebenfalls tun und den Status für diese Komponenteninstanz beibehalten.

  • Tolle Antwort Estus, danke. Es ist eine Schande, dass meine Frage in die Warteschleife gestellt wurde, da ich denke, dass sie vielen Menschen eine große Hilfe sein könnte. Das ist heutzutage leider Stack Overflow.

    – Jonhobbs

    17. Dezember 2018 um 1:26 Uhr


  • Gern geschehen. Das ist kein großes Problem, solange die Antwort zu Ihnen passt. Die Frage ist weiterhin für andere Benutzer zugänglich. Wird wahrscheinlich mit der Zeit aufgeschlossen.

    – Estus-Kolben

    18. Dezember 2018 um 19:51 Uhr

Benutzeravatar von Ryan Cogswell
Ryan Cogwell

Dan Abramov hat erst vor ein paar Tagen einen Blogbeitrag erstellt, der dies behandelt:

https://overreacted.io/how-does-setstate-know-what-to-do/

Die zweite Hälfte geht speziell auf Hooks wie useState ein.

Für diejenigen, die an einem tiefen Einblick in einige der Implementierungsdetails interessiert sind, habe ich hier eine verwandte Antwort: Wie bestimmen Reaktionshaken die Komponente, für die sie bestimmt sind?

Benutzeravatar von Eliav Louski
Eliav Louski

Ich würde die Lektüre empfehlen https://eliav2.github.io/how-react-hooks-work/

Es enthält detaillierte Erklärungen darüber, was bei der Verwendung von Reaktionshaken vor sich geht, und demonstriert es mit vielen interaktiven Beispielen.

Hinweis: Der Artikel erklärt nicht technisch, wie React Calls für spätere Phasen plant, sondern zeigt vielmehr, welche Regeln React verwendet, um Calls für spätere Phasen zu planen.

Benutzeravatar von KP
KP

Das URL in einer anderen Antwort von Eliav Louski ist bisher die beste React-Erklärung, die mir begegnet ist. Diese Seite sollte das offizielle Tutorial von React ersetzen, da es die ganze Magie von Haken und Freunden entfernt.

1404590cookie-checkReact Hooks – Was passiert unter der Haube?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy