Warum löst useState() doppelte Renderings im Entwicklungsmodus von React aus?

Warum verursacht useState() doppelte Renderings im Entwicklungsmodus?

In React kann die Verwendung von useState für die Statusverwaltung während des Status zwei Renderings auslösen Aktualisierungen. Dieses Verhalten ist auf den strengen Modus von React zurückzuführen, der das Entwicklungs-Debugging durch die Simulation potenzieller Nebenwirkungen verbessert.

Beachten Sie den folgenden Codeausschnitt:

import React, { useState } from "react";
...
const [number, setNumber] = useState(0);
...
function changeNumber() {
    setNumber(state => state + 1);
}
...

Wenn Sie auf die Schaltfläche klicken, die die Funktion „changeNumber“ auslöst, Möglicherweise beobachten Sie zwei Konsolenprotokolle, die das erneute Rendern von Komponenten signalisieren. Dies liegt am Strict Mode, der Funktionen wie useState Updater dazu zwingt, in Entwicklungsumgebungen zweimal ausgeführt zu werden.

In der Dokumentation von React wird erklärt, dass der Strict Mode potenzielle Nebenwirkungen erkennt und hervorhebt, indem bestimmte Funktionen, einschließlich State Updater-Funktionen, absichtlich erneut aufgerufen werden wie die, die an useState übergeben wurden. Das Ziel besteht darin, das Debuggen zu erleichtern und deterministisches Verhalten sicherzustellen.

Um dieses doppelte Rendering abzumildern, können Sie den strikten Modus deaktivieren, indem Sie den folgenden Code vom Einstiegspunkt Ihrer Anwendung entfernen:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Das obige ist der detaillierte Inhalt vonWarum löst useState() doppelte Renderings im Entwicklungsmodus von React aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!