javascript - Min React-komponent renderas två gånger på grund av Strict Mode

Min React-komponent renderas två gånger. Så jag bestämde mig för att göra en rad-för-rad felsökning, och problemet är här:

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

React-dom.utveckling.js

Är det på grund av det strikta läget? Kan jag stänga av det? Vad är strikt läge? Behöver jag det?

Svar #1

StrictMode renderar komponenter två gånger (i utveckling men inte i produktion) för att upptäcka eventuella problem med din kod och varna dig om dem (vilket kan vara ganska användbart).

Om du har StrictMode aktiverat i din app men inte kommer ihåg att du aktiverade det, kan det bero på att du använde create-react-app eller liknande för att skapa din app från början, vilket automatiskt aktiverar StrictMode som standard.

Till exempel kan du upptäcka att din {app} är omsluten av <React.StrictMode> i din index.js:

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

Om så är fallet kan du inaktivera StrictMode genom att ta bort <React.StrictMode>-taggen:

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

Svar #2

Ja, du måste ta bort striktläge eftersom

Strict-läge kan inte automatiskt upptäcka bieffekter åt dig, men det kan hjälpa dig att se dem genom att göra dem lite mer deterministiska. Detta görs genom att avsiktligt anropa följande funktioner två gånger: Klasskomponentens konstruktor, render- och shouldComponentUpdate-metoderna.

Källa: React-dokumentation: Strict Mode

Svar #3

För Next.js-användare här som jag själv, är strikt läge också aktiverat som standard och orsakar detta problem.

Du kan stänga av det på detta sätt

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

Svar #4

I en React-app med StrictMode:

  • Om du ser dubbla konsolloggar som detta:

  • Och om du vet att StrictMode hjälper dig att optimera din app på något sätt

  • Och du vill inte helt inaktivera StrictMode

Sedan :

React Developer Tools Chrome-tillägget erbjuder ett alternativ att Dölja loggar under andra renderingen i Strict Mode. För att aktivera det:

  • Installera tillägget.

  • I ditt Chrome Developer Tools-fönster skapas en ny flik som kallas Components. Klicka på den.

  • Klicka sedan på kugghjulsikonen i komponentfliken.

  • Välj sedan fliken Debugging, och markera alternativet för att Dölj loggar under andra renderingen i Strict Mode.

Du kommer inte längre att se de dubbla loggarna i konsolen.

Relaterade artiklar