Was löst eine Server-Antwort aus?

Links läuft eine echte React-App. Während du klickst, schreibt die Werkbank mit, was React tut. In diesem Teil steht das für jedes Ereignis, immer in denselben fünf Schritten:

1. ① AuslöserEtwas passiert: ein Klick oder eine Antwort vom Server. Eine Funktion läuft.
2. ② MerkenSie ruft einen Setter auf. React merkt sich einen neuen Wert im State.
3. ③ VerteilenReact ruft die Komponente, der der State gehört, noch einmal auf, und alle Komponenten darunter. Das heißt neu zeichnen.
4. ④ AnzeigenDie Komponenten geben zurück, was zu sehen sein soll (JSX). React ändert im Browser nur, was anders ist.
5. ⑤ DanachEin Effect kann jetzt von selbst etwas anstoßen, zum Beispiel eine Anfrage an den Server.

Komponente

eine Funktion, die JSX zurückgibt, etwa Menu oder Cart.

State

Werte, die sich eine Komponente zwischen zwei Aufrufen merkt (useState).

Setter

die Funktion, mit der man einen State-Wert ändert, etwa setCart.

Prop

ein Wert oder eine Funktion, die eine Komponente einer anderen mitgibt.

Hook

eine Funktion, deren Name mit use beginnt: useState, useEffect oder der eigene useMenu.

Unter jeder Station steht, woher eine Aussage kommt: Aufnahme hat die Werkbank beim Lauf mitgeschrieben, aus dem Code steht so im Quelltext. Stationen, die genauso ablaufen wie beim letzten Ereignis, stehen nur als eine Zeile da.