Warum zeigen React Hooks ein inkonsistentes Zustandsverhalten mit Event-Listenern?

Falsches React Hooks-Verhalten mit Event Listener

Übersicht

Dieser Artikel befasst sich mit einem Problem, das bei der Verwendung von React Hooks auftritt, insbesondere im Hinblick auf das inkonsistente Verhalten von Zustandskonsolenprotokollierung, wenn sie durch Ereignis-Listener in benutzerdefinierten Komponenten ausgelöst wird.

Problemstellung

Beachten Sie die angegebene CodeSandbox: https://codesandbox.io/s/lrxw1wr97m. Befolgen Sie diese Schritte:

1. Klicken Sie zweimal auf die Schaltfläche „Karte hinzufügen“, um zwei Karten zu erstellen.
2. Klicken Sie in der ersten Karte auf „Schaltfläche1“, um die richtige Anzahl an Karten anzuzeigen (2 ) in der Konsole.
3. Klicken Sie in der ersten Karte auf „Button2“ (wird von einem Ereignis-Listener verarbeitet), um eine falsche Anzeige nur einer Karte in der Konsole zu beobachten.

Das Problem tritt auf, wenn versucht wird, den aktualisierten Status innerhalb des an „Button2“ angehängten Ereignis-Listeners anzuzeigen.

Ursache

Die Diskrepanz in der Statusanzeige ist auf die unterschiedliche Art und Weise zurückzuführen, wie Ereignishandler implementiert werden in den CardsProvider- und Card-Komponenten.

• CardsProvider: Ereignishandler werden innerhalb des Umfangs der Funktionskomponente definiert und erstellen neue Funktionen mit Verweisen auf den aktuellen Status zum Zeitpunkt der Definition.
• Karte: Event-Handler werden als Requisiten empfangen und einmalig auf der Komponentenhalterung registriert. Diese Handler verweisen jedoch auf einen veralteten Zustand, der möglicherweise nicht den aktuellen Zustand darstellt.

Lösungen

Mehrere Ansätze können dieses Problem lösen:

Veränderlicher Zustand :

Veränderliche Zustandswerte wie die von useRef bereitgestellten können verwendet werden, um die neuesten Zustandsänderungen beizubehalten. Diese Methode wird jedoch nicht empfohlen, da useState für die Verwaltung unveränderlicher Zustände gedacht ist.

Statusaktualisierungsfunktion:

Die Verwendung von Statusaktualisierungsfunktionen ermöglicht die Übergabe des neuesten Status an den Rückruf, um sicherzustellen, dass der angezeigte Status immer aktuell ist.

Manuelle Ereignis-Listener-Neuregistrierung:

Alternativ können Ereignis-Listener bei jeder Statusaktualisierung neu registriert werden Garantieren Sie den Zugriff auf den aktuellen Status.

Eingebaute Ereignisbehandlung:

Wenn möglich, macht die Verwendung des nativen DOM-Ereignisbehandlungsmechanismus von React die Notwendigkeit einer manuellen Ereignis-Listener-Verwaltung überflüssig.

Zusammenfassung

Die Inkonsistenz in der Statusanzeige mit der Ereignis-Listener-Behandlung kann auf die unterschiedliche Behandlung von Ereignishandlern innerhalb der betroffenen Komponenten zurückgeführt werden. Durch die Einführung geeigneter Lösungen können Entwickler dieses Problem lindern und das korrekte Zustandsverhalten aufrechterhalten.

Das obige ist der detaillierte Inhalt vonWarum zeigen React Hooks ein inkonsistentes Zustandsverhalten mit Event-Listenern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!