Warum feuert React's OnChange Event mehrmals nach dem Eintritt in einen Charakter?

Eingehende Diskussion über die Ursache des React-Onchange-Ereignisses, das mehrmals ausgelöst wird

Bei der React -Entwicklung ist onChange -Ereignissen ein häufiges Problem, insbesondere wenn sie Zeichen in das Eingabefeld eingeben. In diesem Artikel werden die Gründe für dieses Phänomen ausführlich untersucht und Lösungen bereitgestellt.

Schauen wir uns zuerst einen Beispielcode an:

 reag import, {usestate} aus "react";

Exportieren Sie die Standardfunktion myComponent () {
  const [inputValue, setInputValue] = usustate ({}); // Beachten Sie, dass dies der Objekttyp const Handlechange = (Ereignis) => {ist
    setInputValue (Event.Target.Value);
    console.log ("onchange ausgelöst:", InputValue);
  };

  Zurückkehren (
    <div>
      <input type="text" onchange="{handleChange}">
    </div>
  );
}

In diesem Beispiel, wenn der Anfangswert von useState ein Objekt {} ist, führt jeder Eingang dazu, dass onChange mehrmals feuert. Wenn Sie jedoch den Anfangswert in einen primitiven Typ wie useState("") ändern, verschwindet das Problem. Warum?

Dies ist kein Fehler in React, sondern ein Ergebnis des kombinierten Effekts des React -Strict -Modus (Strictmode) und der asynchronen Eigenschaften von Zustandsaktualisierungen .

1. React Strict -Modus:

In einer Entwicklungsumgebung führt das Aktivieren des strengen Modus zusätzliche Überprüfungen durch, einschließlich zweier Renderings von Komponenten. Der erste Render wird verwendet, um Nebenwirkungen zu erkennen, und das zweite Render ist das tatsächliche DOM -Update.

2. Asynchrone Eigenschaften der Statusaktualisierung:

Zustandsaktualisierungen in React sind asynchron. Dies bedeutet, dass setInputValue den Status der Komponente nicht sofort aktualisiert, sondern die Warteschlangen für den nächsten Rendering -Zyklus.

Bei Verwendung eines Objekts als Zustand:

• Erster Rendering: Komponentenrendern, inputValue ist {} .
• Eingabezeichen: onChange -Trigger, setInputValue wird aufgerufen, inputValue wird jedoch nicht sofort aktualisiert.
• Zweites Rendering: React erkennt eine Statusaktualisierung und stellt die Komponente erneut ab. Zu diesem Zeitpunkt wird inputValue auf den neuen Wert aktualisiert. onChange Fires erneut und drucken den aktualisierten Wert.

Wenn Sie den ursprünglichen Typ als Zustand verwenden:

• Erster Rendering: Komponentenrendering, inputValue ist "" .
• Eingabezeichen: onChange -Trigger, setInputValue wird aufgerufen. Obwohl das Update asynchron ist, löst das Update des ursprünglichen Typs kein zusätzliches Rendering aus.

Lösung:

Um zu vermeiden, dass onChange -Ereignis mehrmals abgefeuert wird, können Sie die folgende Methode verwenden:

• Verwenden Sie funktionale Aktualisierung: Verwenden Sie setInputValue , um die Funktion zu aktualisieren:

 const handlechange = (event) => {
  setInputValue ((PREVSTATE) => ({... PREVSTATE, Wert: Ereignis.Target.Value}));
  console.log ("onchange ausgelöst:", InputValue);
};

• Verwenden Sie Anti-Shake oder Drosselung: Wenn der häufige Betrieb des Eingangs erforderlich ist, können Sie Anti-Shake- oder Drosselungstechnologie verwenden, um die Auslöserfrequenz von onChange zu begrenzen.

• Vermeiden Sie den Status direkt in Onchange: Sie können den Eingangswert in einer Zwischenvariablen speichern und den Status bei Bedarf aktualisieren.

Durch das Verständnis des strengen Mechanismus von React und Zustandsaktualisierungsmechanismus können wir das Problem des onChange -Ereignisses mehrmals effektiv lösen und effizientere und stabilere React -Code schreiben. Denken Sie daran, dass die Auswahl des richtigen Ausgangszustandstyps (primitive Typen sind normalerweise einfacher) und die Verwendung funktionaler Updates sind der Schlüssel.

Das obige ist der detaillierte Inhalt vonWarum feuert React's OnChange Event mehrmals nach dem Eintritt in einen Charakter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!