Erläuterung synthetischer React-Ereignisse

Synthetische React-Ereignisse beziehen sich auf die React-Simulation eines Dom-Ereignisflusses mithilfe von JS. (Der Faserbaum simuliert die Dom-Baumstruktur) Der Ereignisfluss synthetischer Ereignisse wird erfasst und im Faserbaum weitergeleitet.

Klicken Sie zunächst auf das Eingabefeld

Wenn Sie auf das Eingabefeld klicken, hört React auf das Fokusereignis (Hinweis 2) (Hinweis 3) am Stammknoten (Hinweis 1).

Wie findet man den entsprechenden virtuellen Dom aus nativen Ereignissen?

An diesem Punkt erhält React nur die Information über das native Ereignisobjekt (nativeEvent). React verwendet das dem nativeEvent entsprechende Dom (EventTarget), um sich im Dom-Baum nach oben zu bewegen und den von React verwalteten Dom-Knoten (Hinweis 4) (Hinweis 5) zu finden, der dem EventTarget am nächsten ist, und erhält die entsprechende Faser A.

Erstellen Sie dann mithilfe des Ereignis-Plugins (Hinweis 6) ein synthetisches Ereignis (Hinweis 7) A. Das synthetische Ereignis A wird von React als Ereignisquelle im simulierten Ereignisfluss betrachtet und Faser A wird von React als Ereignisziel betrachtet.

Synthetischer Ereignisstrom?

Sammeln Sie alle Fasern des Hosttyps ab Faser A aufwärts (bis zur Faser HostComponent der obersten Ebene). Anschließend wird das gesammelte Faserarray von hinten nach vorne (Erfassung) und dann von vorne nach hinten (Blase) durchlaufen. Bei jeder Durchquerung wird das Fokusereignis erfasst, das an den Faserknoten des aktuellen Durchquerungselements gebunden ist (Hinweis 8). Anschließend (nachdem das Ereignis-Plugin abgeschlossen ist, d. h. das synthetische Ereignis generiert wurde) werden die Foucs-Rückrufe in der Reihenfolge der Erfassung ausgeführt. So simuliert React den Ereignisfluss.

Erweiterungen

Durch Klicken auf das Eingabefeld werden mehrere Ereignisse ausgelöst

Neben dem Fokus werden auch andere Ereignisse ausgelöst – Klick etc. React hört auf verschiedene Ereignistypen am Stammknoten. Jedes Mal, wenn ein Ereignis gehört wird, wird es einmal versendet. Bei mehreren Ereignistypen wird es mehrere Male versendet. Durch Klicken auf das Eingabefeld werden nacheinander Fokus und Klick ausgelöst. Wenn das Fokusereignis ausgelöst wird, wird das Klickereignis ausgelöst. Bei jedem Auslösen eines Ereignisses wird die Warteschlange für ausstehende Synchronisierungsaufgaben (flushSyncCallBackQueue) verarbeitet.

Unerwartetes Rendering?

Wenn im NoMode-Modus Ereignisse mehrmals ausgelöst werden und jedes Ereignis den Status ändert (z. B. durch den Aufruf von setState), wird die entsprechende Komponente mehrmals gerendert. Wenn Sie in diesem Beispiel auf das Eingabefeld klicken und das Fokusereignis und das Klickereignis an die Eingabe binden und die Ereignisrückrufe „setState“ aufrufen, wird die Eingabe zweimal gerendert.

Warum wird die Eingabe in React nach dem Festlegen des Werts zu einer kontrollierten Komponente?

Wenn in React das Wertattribut für die Eingabe festgelegt ist, ändert sich der Wert des Eingabefelds nicht, unabhängig davon, was in das Eingabefeld eingegeben wird. Sofern Sie den Zustand der Eingabekomponente nicht ändern. Nach der Verarbeitung des simulierten Ereignisstroms ruft React Methoden auf, um einige unerwartete Effekte zurückzusetzen. Wenn Sie in diesem Szenario beispielsweise einen Wert in die Eingabe eingeben, wird im Eingabefeld der von Ihnen eingegebene Wert angezeigt, der Eingabewert wird jedoch sofort durch die Werteigenschaft der entsprechenden Faser aktualisiert (finishEventHander setzt die gesteuerte Komponente zurück). Wenn für die Eingabe kein Wert festgelegt ist, wird dieser ignoriert.

Warum sind synthetische Ereigniseigenschaften manchmal nicht zugänglich?

Denn React gibt das synthetische Ereignisobjekt frei, nachdem der Ereignisfluss (erfasst das Sprudeln) abgeschlossen ist (SyntheticEvent.prototype.destructor setzt die Eigenschaften des synthetischen Ereignisobjekts zurück).

Wie simuliert React die Verhinderung von Event-Bubbling und Standardverhalten?

React führt Callbacks in der Reihenfolge des Ereignisflusses aus. Vor der Ausführung prüft es, ob sich das aktuelle synthetische Ereignisobjekt in einem Zustand befindet, der ein Aufsteigen verhindert. Wenn dies der Fall ist, beendet es den Ereignisfluss. Der synthetische Ereignisobjekt-Prototyp von React verbessert native Funktionen. Die Blasenverhinderung und die Standardverhaltensverhinderung der nativen Ereignismethode sind gekapselt (die native Ereignismethode wird auch intern aufgerufen).

Hinweise

Hinweis 1: Der Stammknoten ist document in react-v16 und der Mount-Container Dom in react-v17
Hinweis 2: Das Fokusereignis ist kein Bubbling-Ereignis, und React hört in der Erfassungsphase auf Nicht-Bubbling-Ereignisse. Hinweis 3: Der Stammknoten hört auf alle Ereignisse, mit Ausnahme von Sonderausnahmen wie Senden, Zurücksetzen, Ungültigkeitserklärungen und Medienereignissen. Hinweis 4: Wenn React den Fiber-Baum auf dem Dom-Baum einbindet, entspricht jeder Fiber-Knoten vom Hosttyp nacheinander dem Dom-Knoten und wird verknüpft. Hinweis 5: Die Suche nach oben ist darauf zurückzuführen, dass der untergeordnete Dom-Knoten möglicherweise nicht von React verwaltet wird, wie z. B. das Scroll-Plug-In eines Drittanbieters. Hinweis 6: Um Dom-Ereignisse zu simulieren, ergänzt React Hinweis 7: Eine Instanz eines Konstruktors innerhalb von React. Einige Eigenschaften des synthetischen Ereignisses stammen von nativeEvent. Synthetische Ereignisse sind Fasern zugeordnet. Hinweis 8: Sie werden gesammelt und nicht ausgeführt. Weil React die Stapelverarbeitung für einen bestimmten Ereignistyp durchführt

Oben finden Sie den ausführlichen Inhalt der detaillierten Erklärung zu synthetischen React-Ereignissen. Weitere Informationen zu synthetischen React-Ereignissen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!