Meine React-Komponente wird aufgrund des Strict Mode zweimal gerendert

Meine React-Komponente wird zweimal gerendert. Also habe ich beschlossen, eine zeilenweise Fehlersuche durchzuführen, und das Problem ist hier:

 if ( workInProgress.mode & StrictMode) {
        instance.render();
      }

React-dom.development.js

Liegt es am strikten Modus? Kann ich es deaktivieren? Was ist der strikte Modus? Brauche ich es?

StrictMode rendert Komponenten zweimal (in der Entwicklung, aber nicht in der Produktion), um Probleme mit Ihrem Code zu erkennen und Sie davor zu warnen (was sehr nützlich sein kann).

Wenn Sie StrictMode in Ihrer App aktiviert haben, sich aber nicht daran erinnern, es aktiviert zu haben, kann dies daran liegen, dass Sie create-react-app oder ähnliches verwendet haben, um Ihre App ursprünglich zu erstellen, wodurch StrictMode standardmäßig automatisch aktiviert wird.

Beispielsweise könnten Sie feststellen, dass Ihre {app} von umschlossen ist <React.StrictMode> in deiner index.js:

  ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

Wenn dies der Fall ist, können Sie StrictMode deaktivieren, indem Sie die entfernen <React.StrictMode> Schild:

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );

Ja, Sie müssen den Strict Mode als entfernen

Strikter Modus kippen Nebenwirkungen automatisch für Sie erkennen, aber es kann Ihnen helfen, sie zu erkennen, indem es sie ein wenig deterministischer macht. Dies geschieht durch absichtliches doppeltes Aufrufen der folgenden Funktionen: Klassenkomponentenkonstruktor , render und shouldComponentUpdate Methoden.

Quelle: React Docs: Strikter Modus

Für Next.js-Benutzer hier wie mich selbst ist der strikte Modus ebenfalls standardmäßig aktiviert und verursacht dieses Problem.

Sie können es auf diese Weise deaktivieren

// next.config.js
module.exports = {
  reactStrictMode: false,
}

Es scheint, dass die Komponente zweimal gerendert wird, aber die erste gerenderte Komponente ist nicht unmontiert? Zumindest ist das das Verhalten, das ich bei React 17 sehe, könnte natürlich ein Fehler in meinem Code sein

In einer React-App mit Strikter Modus:

• Wenn Sie zwei Konsolenprotokolle wie diese sehen:
  

• Und wenn Sie wissen, dass StrictMode Ihnen hilft, Ihre App auf irgendeine Weise zu optimieren

• Und Sie möchten StrictMode nicht vollständig deaktivieren

Dann:

Der Chrome-Erweiterung für Entwicklertools reagieren bietet eine Möglichkeit dazu Protokolle während des zweiten Renderns im strengen Modus ausblenden. Um das zu ermöglichen:

• Installieren Sie die Erweiterung.
• In Ihrem Chrome Developer Tools-Fenster wird eine neue Registerkarte mit dem Namen Komponenten geschaffen. Klick es an.
  
• Klicken Sie dann auf das Zahnradsymbol auf der Registerkarte Komponenten.
  
• Wählen Sie dann die aus Debuggen Registerkarte und aktivieren Sie die Option zu Protokolle während des zweiten Renderns im strengen Modus ausblenden.
  

Sie werden die doppelten Protokolle in der Konsole nicht mehr sehen.

Wenn Sie nextjs verwenden und den strikten Modus deaktivieren möchten, gehen Sie zu your next.config.js Datei und setze „reactStrictMode“ auf „false“.

module.exports = {
reactStrictMode: false,
};

aber der strikte Modus wird für die Entwicklung empfohlen, sobald Sie überprüfen, ob die doppelte Einbindung durch den strengen Modus verursacht wird, ist es vorzuziehen, ihn zu aktivieren