Tag 5 des React-Lernens: Batching und funktionale Updates
Ich dachte, dass das mehrfache Aufrufen eines State-Setters mehrere Renders auslöst.
Ich habe mich geirrt.
React ist schlauer als das. Es nutzt einen Prozess namens Automatic Batching.
Anstatt nach jedem einzelnen Update zu rendern, gruppiert React diese. Es sammelt alle Updates und führt ein einziges Rendering durch. Das spart Performance.
Hier ist das, was ich heute gelernt habe.
Der Batching-Prozess Wenn man mehrere State-Funktionen aufruft, folgt React diesem Ablauf:
- Mehrere State-Updates treten auf.
- React fasst sie zusammen (Batching).
- React führt ein Rendering durch.
- React überträgt die Änderungen an die UI.
Das Problem mit Standard-Updates Ich habe diesen Code ausprobiert: setCount(count + 1); setCount(count + 1); setCount(count + 1);
Ich erwartete, dass der Zähler von 0 auf 3 steigt. Er stieg jedoch nur von 0 auf 1.
Das passiert, weil setCount(count + 1) nicht bedeutet: „erhöhe den Zähler“. Es bedeutet: „setze den Zähler auf diesen spezifischen Wert“.
Wenn count 0 ist, weist jede Zeile React an, den Zähler auf 1 zu setzen. React fasst diese zusammen und sieht, dass die letzte Anweisung darin besteht, den Zähler auf 1 zu setzen.
Die Lösung: Funktionale Updates Um dies zu beheben, muss man ein funktionales Update verwenden. Dieses nutzt den aktuellsten verfügbaren State in der Update-Queue.
Der richtige Weg: setCount((prev) => prev + 1);
Wenn man dieses Muster verwendet, gibt React jedem Update den aktuellsten Wert.
- Erstes Update: 0 + 1 = 1
- Zweites Update: 1 + 1 = 2
- Drittes Update: 2 + 1 = 3
Jetzt erreicht der Zähler tatsächlich 3.
Ein häufiger Fehler Ich habe einmal geschrieben: setCount((prev) => { prev + 1 });
Der Zähler wurde undefined. Wenn man geschweifte Klammern in einer Arrow-Function verwendet, muss man das Schlüsselwort return benutzen. Verwende stattdessen dies: setCount((prev) => prev + 1);
Wichtigste Erkenntnisse:
- React fasst mehrere State-Updates zusammen, um die Geschwindigkeit zu verbessern.
- setState-Aufrufe lösen nicht immer sofortige Renders aus.
- Standard-Updates verwenden den Wert aus dem aktuellen Render-Zyklus.
- Funktionale Updates nutzen den aktuellsten State aus der Update-Queue.
- React nutzt eine interne Update-Queue, um diese Änderungen zu verwalten.