Warum feuert das Onchange -Ereignis mehrmals in React? Was hat es mit Zustandsart und strengen Muster zu tun?

Reagieren Sie onChange -Ereignis mehrmals aus: Erforschen Sie tief den Grund

Bei der Entwicklung von React -Anwendungen werden onChange -Ereignisse mehrmals ausgelöst, was häufig verwirrend ist. Dieser Artikel wird dieses Problem im Detail analysieren und seine Beziehung zu useState und strengen Mustern untersuchen.

Der folgende Beispielcode zeigt dieses Problem: Geben Sie ein Zeichen ein und die Konsole druckt das Protokoll zweimal. Das Ersetzen von useState({}) durch useState(3) (Ändern des Statusarts vom Objekt zum primitiven Typ) wird das Protokoll nur einmal gedruckt. Dies zeigt an, dass der Statusart die Anzahl der Trigger onChange -Ereignisses beeinflusst.

 reag import, {usestate} aus "react";

Exportieren Sie die Standardfunktion von Child () {
  const [state, setState] = usestate ({}); // Änderung in Usestate (3) und löst nur const onchange = (e) => {// auf das Hinzufügen von Ereignisparametern E achten
    console.log ("onchange ausgelöst", Zustand, E. -target.Value); // Ausgabe hinzufügen e.target.Value
    setState ({... Status, Wert: e.Target.Value}); // Status aktualisieren
  };

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

Dieses Phänomen ist eng mit Reacts Strictmode verwandt. Aktivieren Sie den strengen Modus in einer Entwicklungsumgebung. React wird absichtlich zweimal dargelegt, um Entwicklern dabei zu helfen, potenzielle Probleme wie unnötige Nebenwirkungen so früh wie möglich zu erkennen. Diese beiden Rendern werden verwendet, um Nebenwirkungen bzw. tatsächliche DOM -Updates zu erkennen.

Wenn der Status Objekttyp ist, ändert sich die Referenzadresse des Objekts nach dem SetState, da das Objekt ein Referenztyp ist. React erkennt diese Änderung im strengen Modus und löst zwei Renderings aus, was dazu führt, dass onChange -Ereignis zweimal aufgerufen wird. Dies geschieht nicht mit dem ursprünglichen Typ (z. B. einer Zahl), da sein Wert selbst direkt aktualisiert wird und keine neue Referenzadresse generiert wird.

Die React -Dokumentation betont, dass Komponenten so reine Funktionen wie möglich gehalten werden sollten, d. H. Die gleiche Eingabe (Requisiten, Zustand und Kontext) sollte immer die gleiche Ausgabe erzeugen. Der strenge Modus hilft Entwicklern, Verstöße gegen diese Regel durch zwei Renderings zu ermitteln.

Wenn Sie das Problem onChange -Ereignisses während der Entwicklung mehrmals auftreten, sollten Sie sich also unbedingt überprüfen:

1. Ob der strenge Modus aktiviert ist : In einer Entwicklungsumgebung löst der strenge Modus zwei Renderings aus.
2. Zustandstyp : Die Verwendung primitiver Typzustände kann wiederholte Renderings vermeiden, die durch Änderungen des Referenztyps verursacht werden.
3. Ereignisbearbeitungsfunktion : Stellen Sie sicher, dass die interne Logik der Ereignishandhabungsfunktion korrekt ist und unnötige doppelte Statusaktualisierungen vermeiden. (Im obigen Modifikationscode haben wir den Ereignisparameter e hinzugefügt und e.target.value verwendet, um den Eingangswert zu erhalten, der das Statusaktualisierung deutlicher zeigt.)

Das Verständnis von React -strengen Mustern und deren Auswirkungen auf verschiedene Datentypen ist entscheidend für das Schreiben effizienter und vorhersehbarer React -Anwendungen. In Produktionsumgebungen ist der strenge Modus häufig deaktiviert, um Leistungsprobleme zu vermeiden.

Das obige ist der detaillierte Inhalt vonWarum feuert das Onchange -Ereignis mehrmals in React? Was hat es mit Zustandsart und strengen Muster zu tun?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!