Der Zweck des strengen Modus in React

1. Strikter Modus in React
2. Vorteile des React Strict-Modus
3. Beste Verwendungen für den React Strict Mode

JavaScript ist eine großartige Programmiersprache für die Entwicklung von Full-Stack-Anwendungen. Anfänger haben oft Schwierigkeiten damit, sauberen, organisierten JavaScript-Code zu schreiben. Glücklicherweise gibt es JavaScript-Frameworks, die eine gewisse Struktur zum Schreiben von Webanwendungen bieten. Und React ist eines der, wenn nicht sogar das beliebteste Framework zum Schreiben effizienter Webanwendungen. Es stellt eine Hilfskomponente namens StrictMode bereit, um Codeteile hervorzuheben, die von den Standardpraktiken in React abweichen.

Strikter Modus in React

React StrictMode hebt potenzielle Probleme in der Anwendung hervor. Auf diese Weise können Sie leichter lesbare und sichere Anwendungen schreiben. Diese Funktion ist im React-Paket enthalten, sodass Sie sie nicht separat importieren müssen. Wenn Sie verdächtigen Code haben, packen Sie ihn in die StrictMode-Hilfskomponente, und das war’s. Hier ist, wie man es in funktionalen React-Komponenten verwendet:

import React, { Component } from 'react';
function SuspiciousComponent() {
  return (
    <div>Let's say this is suspicious</div>
  )
}
function App() {
  return (
    <div>
    	<React.StrictMode>
    	<SuspiciousComponent></SuspiciousComponent>
    	</React.StrictMode>
    </div>
  )
}

In diesem Fall haben wir nur <SuspiciousComponent> mit unserer Hilfskomponente umschlossen. Wenn wir den Code der untergeordneten Komponente so ändern, dass er den empfohlenen Praktiken in React widerspricht, würde StrictMode Alarm schlagen. Dies ist notwendig, da einige schlechte Praktiken die App möglicherweise nicht zum Absturz bringen. Nur weil die App funktioniert, heißt das nicht, dass es keine Probleme damit gibt. Wenn Ihnen ein Stück Code verdächtig vorkommt, wickeln Sie es mit der Hilfskomponente <React.StrictMode> ein, um sicherzustellen, dass nichts daran falsch ist. Sie können eine einzelne Komponente, mehrere Komponenten oder einen ganzen Baum umschließen.

Wenn Sie im gesamten Komponentenbaum nach möglichen Fehlern suchen möchten, sehen Sie sich die return-Anweisung der Elternkomponente an und packen Sie das <div> (oder ein anderes Element) ein, das alle anderen Komponenten enthält. Wenn Sie eine komplexe Anwendung erstellt haben, wird StrictMode unweigerlich einige Fehler erkennen und an die Konsole melden.

Genau wie die Helferkomponente Fragment rendert StrictMode keine tatsächliche Benutzeroberfläche. Es hat auch keinen Einfluss auf die Stile Ihrer Anwendung.

React Strict Mode wird verwendet, um Fehler im Entwicklungsmodus zu erkennen. Nachdem Sie alle Fehler beseitigt haben und die App produktionsbereit ist, können Sie sie entfernen.

Vorteile des React Strict-Modus

Neben den offensichtlichen Vorteilen der Verwendung von StrictMode in React kann es auch ein hilfreiches Werkzeug sein, um zu lernen, qualitativ hochwertigeren Code zu schreiben.

Schutz vor Nebenwirkungen

Einige Lebenszyklusmethoden können während der Renderphase mehrmals aufgerufen werden, daher empfiehlt React, dass sie keine Nebenwirkungen enthalten sollten. Diese Empfehlung wird oft übersehen, was zu falschen Status- und Speicherlecks führt, die Ihre Anwendung Angriffen von außen aussetzen. Glücklicherweise kann Ihnen die Hilfskomponente StrictMode dabei helfen, schädliche Nebenwirkungen zu lokalisieren und zu beheben. Und um dies zu erreichen, werden die Methoden von mit StrictMode umhüllten Komponenten gezielt zweimal aufgerufen.

Veraltete Praktiken erkennen

Funktionen wie findDOMNode waren einst in ReactJS erlaubt, sind jetzt aber veraltet. Dasselbe gilt für die API context, die in der Vergangenheit weit verbreitet war, aber bald entfernt werden soll. StrictMode kann ein nützliches Werkzeug sein, um bei veralteten Methoden oder React-spezifischen Funktionen Alarm zu schlagen.

Beste Verwendungen für den React Strict Mode

Wenn Sie mit einer Codebasis arbeiten, die Sie nicht selbst geschrieben haben, kann StrictMode ein hilfreiches Werkzeug sein, um die richtige Organisation des Codes zu gewährleisten, insbesondere wenn ein unerfahrener Entwickler die React-Anwendung geschrieben hat.

Einen Fehler im JavaScript-Code (mit React) zu finden, kann ziemlich schwierig sein. Aber das Umschließen des Codes mit StrictMode könnte Ihnen einige Hinweise darauf geben, was falsch sein könnte.

Insgesamt ist StrictMode eines der nützlichsten Tools in React. Neueinsteiger können es verwenden, um sich daran zu gewöhnen, Code zu schreiben, der den empfohlenen Praktiken in React entspricht. Je mehr du mit dem strengen Modus herumspielst, desto komfortabler wirst du ihn verwenden.