Reaktionsserie: useState vs useRef

Wenn Sie anfangen, können useState und all seine Macken überwältigend genug sein. Geben Sie nun useRef in die Mischung und Sie erhalten eine laute Gehirnexplosion.

Ich dachte, es wäre hilfreich, etwas tiefer in die technischen Details von useRef vs. useState einzutauchen, da es Ingenieuren normalerweise schwer fällt, die Unterschiede zwischen ihnen zu verstehen und zu verstehen, wann sie sich für das eine gegenüber dem anderen entscheiden sollten.

Hier sind meine Definitionen für jeden, in groben Zügen und offensichtlich stark vereinfacht:

useState ist ein Hook, mit dem Sie auf einen Wert zugreifen und ihn aktualisieren können, wodurch ein erneutes Rendern ausgelöst wird.

useRef ist ein Hook, mit dem Sie auf einen Wert verweisen können, der für das Rendern nicht benötigt wird.

Sie fragen sich vielleicht: Warum ist es wichtig zu verstehen, was jedes einzelne davon mit sich bringt? Nun, Sie könnten versucht sein, useState in alles einzubauen, einfach weil es funktioniert.

Ja, JEDOCH, je komplexer Ihre App wird, wenn Komponenten Status-Requisiten fünf Ebenen nach unten weitergeben und dabei eine Reihe unnötiger Updates auslösen, werden Sie wahrscheinlich früher auf Leistungsprobleme stoßen als du dir vorstellst.

Ein weiteres Missverständnis, das viele Entwickler haben, ist die Annahme, dass useRef nur DOM-Elemente manipulieren und darauf zugreifen kann, was traurig ist, weil Ihnen alle die anderen 99 Dinge entgehen, die useRef tun kann.

Beginnen wir mit useState! Halten Sie jetzt die Ohren offen, mein lieber Entwickler ʕ◉ᴥ◉ʔ

✨ useState

useState ist eine leistungsstarke, aber einfache Möglichkeit, die Ansicht zu aktualisieren, sobald sich der Wert einer Variablen ändert. Der neueste Wert wird mit dem Bildschirm synchronisiert, ohne dass wir selbst manuell irgendwelche Vorgänge ausführen müssen. Die Deklarationssyntax lautet wie folgt: const [memesILiked, setMemesILiked] = useState(9000).

Lassen Sie uns nun darüber sprechen, was unter der Haube passiert, wenn Sie eine Operation mit useState ausführen.

Das Aktualisieren eines Statuswerts löst ein erneutes Rendern aus, und wie Sie sich vorstellen können, ist das erneute Rendern der Ansicht ein SEHR teurer Vorgang für den Browser. So arbeiten React und der Browser zusammen, um sicherzustellen, dass Ihre App aktualisiert wird:

1. Ereignisauslöser: Ein Ereignis löst eine Statusaktualisierung aus. Ein Klick, ein Timer oder so etwas.
2. Statusaktualisierung: setState wird aufgerufen und plant ein Update für die Komponente. Die Komponente wird als „schmutzig“ markiert (erneutes Rendern erforderlich).
3. Abgleichsphase: React startet den Abgleich zwischen dem neuen virtuellen DOM und dem alten virtuellen DOM. Es rendert die Komponente und alle ihre untergeordneten Elemente rekursiv neu.
4. Unterschiede prüfen: React vergleicht den neuen virtuellen DOM-Baum mit dem vorherigen. Die Änderungen werden in einer Liste von Aktualisierungen gespeichert, die auf das echte DOM angewendet werden sollen.
5. Renderphase: Die Rendermethode oder Funktionskomponente wird mit dem neuen Status aufgerufen.
6. Commit-Phase: React wendet die Änderungen aus dem Diffing-Prozess auf das echte DOM an.
7. DOM aktualisieren: Das echte DOM wird aktualisiert, um den neuen Status widerzuspiegeln. Der Browser zeichnet das DOM neu und aktualisiert die Benutzeroberfläche optisch.
8. Post-Render-Effekte: Alle Effekte, deren Ausführung nach dem erneuten Rendern der Komponente geplant war, werden aufgerufen. Dazu gehören useEffect-Hooks, die mit Abhängigkeiten registriert wurden, die sich während des Renderns geändert haben.

Puh, das ist eine Menge Zeug ... Während der obige Prozess sicherstellt, dass Ihre Benutzeroberfläche mit Ihrem Anwendungsstatus synchron bleibt, zeigt er auch, warum übermäßiges oder unnötiges erneutes Rendern zu Leistungsproblemen führen kann . Glücklicherweise bietet React mehrere Strategien und Tools zur Optimierung dieses Prozesses, wie useMemo und useCallback, aber das würde den Rahmen dieses Artikels sprengen!

Zusammenfassend lässt sich sagen, dass useState ein ziemlich praktischer Hook ist und bei richtiger Verwendung dem Benutzer ein großartiges Erlebnis bieten kann. Nehmen Sie zum Beispiel das Umschalten von Themen. Mit useState können Sie ganz einfach zwischen hellem und dunklem Modus wechseln, sodass Ihre Benutzer sofort die Freude haben, zu sehen, wie sich die App entsprechend ihren Vorlieben verändert.

✨ useRef

Jetzt reden wir über useRef. Während es bei useState darum geht, erneute Renderings auszulösen, wenn sich der Status ändert, ist useRef wie der stille Beobachter, der niemals Aufmerksamkeit auf sich ziehen möchte. Es eignet sich perfekt zum Speichern veränderlicher Werte, die bei Änderungen nicht erneut gerendert werden müssen. Die Syntax sieht wie folgt aus: const memeRef = useRef(null).

useRef wird am häufigsten für den direkten Zugriff auf DOM-Elemente verwendet. Wenn Sie beispielsweise ein Eingabefeld programmgesteuert fokussieren müssen, kann useRef einen Verweis auf dieses Element enthalten. Die Fähigkeiten von useRef gehen jedoch über den reinen DOM-Zugriff hinaus. Es kann auch jeden veränderlichen Wert speichern! Und hier, meine Freunde, geschieht die Magie ??? (zumindest meiner Meinung nach).

Stellen Sie sich das so vor: useRef ist eine Möglichkeit, Werte beizubehalten über Renderings hinweg, ohne ein erneutes Rendering auszulösen. Dadurch eignet es sich perfekt zum Speichern von Daten wie Timern, Zählern oder sogar dem vorherigen Zustand einer Komponente. Im Gegensatz zu useState wird React beim Aktualisieren einer Referenz nicht aufgefordert, Ihre Komponente erneut zu rendern. Es aktualisiert einfach stillschweigend den Wert und führt sein Geschäft weiter.

Hier ist ein praktisches Beispiel: Nehmen wir an, Sie möchten einen einfachen Zähler implementieren, möchten aber nicht, dass die Benutzeroberfläche jedes Mal aktualisiert wird, wenn Sie den Zähler erhöhen. Sie können useRef verwenden, um den Zählerwert zu speichern. Der Zähler würde sich wie erwartet erhöhen, aber da die Komponente diesen Ref-Wert für Rendering-Zwecke nicht berücksichtigt, würde kein erneutes Rendering stattfinden.

useRef eignet sich auch hervorragend dazu, den neuesten Wert eines Zustands beizubehalten, ohne zusätzliche Renderings zu verursachen. Wenn Sie beispielsweise ein Intervall verwenden, um einen Wert zu aktualisieren, Sie aber nicht möchten, dass dieser Wert jede Millisekunde ein erneutes Rendern auslöst, ist useRef Ihr Werkzeug der Wahl. Dadurch kann sich der Wert im Hintergrund ändern, sodass Ihre Benutzeroberfläche reaktionsfähig bleibt und unnötiges erneutes Rendern vermieden wird.

Zusammenfassend lässt sich sagen, dass useRef am besten verwendet wird für:

• Zugriff auf DOM-Elemente: Klassischer Anwendungsfall, wie das Fokussieren eines Eingabefelds.
• Speichern veränderlicher Werte: Die kein erneutes Rendern erfordern, wie z. B. Timer oder vorherige Werte.
• Werte über alle Renderings hinweg beibehalten: Ohne ein erneutes Rendering zu verursachen, damit Ihre Benutzeroberfläche reibungslos und effizient bleibt.

Jetzt, da Sie HOFFNUNGSFÄLLIG den Unterschied verstehen (wenn ich meine Pflicht richtig getan habe²), lassen Sie uns auf ein paar nicht so häufige Anwendungsfälle eingehen. Ich werde mich etwas mehr auf useRef konzentrieren, da ich das Gefühl habe, dass es hier der unbesungene Held ist.

1. Verfolgen des Komponenten-Montagestatus: useRef kann verwendet werden, um zu verfolgen, ob eine Komponente gemountet oder nicht gemountet ist. Dies kann nützlich sein, um Statusaktualisierungen nach dem Unmounten zu vermeiden.

2. Statische Werte halten: Zum Speichern statischer Werte, die sich zwischen den Renderings nicht ändern, wie eine Konstante oder ein zwischengespeicherter Wert, ist useRef effizienter als useState.

3. Neuinitialisierung verhindern: Wenn Sie verhindern möchten, dass ein Codeabschnitt bei jedem Rendern erneut ausgeführt wird (z. B. beim Initialisieren einer WebSocket-Verbindung).

4. Vorherige Rückrufe speichern: Wenn Sie einen Verweis auf eine frühere Rückruffunktion behalten müssen, kann useRef den vorherigen Funktionsverweis speichern, ohne den Rendering-Zyklus der Komponente zu beeinträchtigen.

5. Referenzieren von Timer-IDs: Wenn Sie mit Timern (wie setTimeout oder setInterval) arbeiten, speichern Sie die Timer-ID in einer useRef, um zu vermeiden, dass jedes Mal ein erneutes Rendern ausgelöst wird, wenn der Timer eingestellt oder gelöscht wird.

6. Animationen auslösen: Zum zwingenden Auslösen von Animationen (wie einem CSS-Übergang oder einer Scroll-Animation) kann useRef verwendet werden, um direkt mit DOM-Elementen zu interagieren, ohne dass es zu erneuten Renderings kommt.

✨ Fazit

Während useState für die Verwaltung und Reaktion auf Zustandsänderungen, die erneute Renderings auslösen sollen, von entscheidender Bedeutung ist, ist useRef der stille Partner, der Ihnen bei der Zustandsverwaltung hilft, ohne die Benutzeroberfläche zu stören.

Wenn Sie wissen, wann Sie die einzelnen Anwendungen verwenden müssen, können Sie potenzielle Leistungsprobleme vermeiden und Ihre React-Anwendungen effizienter und wartbarer machen!

Danke fürs Lesen, wenn du es hierher geschafft hast, PFOTEN HOCH UND HIGH FIVE! ⊹⋛⋋( Ԟਊ ־)⋌⋚⊹

Fußnoten:
¹ Offensichtlich eine Übertreibung.
² Ich bin ein bisschen dramatisch, falls du es nicht erkennen kannst.

Das obige ist der detaillierte Inhalt vonReaktionsserie: useState vs useRef. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!