ReactJS - Strict Mode: Ein Leitfaden für Anfänger

Hallo, zukünftige React-Entwickler! Heute tauchen wir in ein wichtiges, aber oft übersehenes Feature von React ein: Strict Mode. Keine Sorge, wenn du neu im Programmieren bist – ich werde dich durch dieses Konzept Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Also hole dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und lassen uns gemeinsam auf diese Lernreise gehen!

Was ist Strict Mode?

Bevor wir uns in die Details vertiefen, lassen Sie uns verstehen, was Strict Mode in React ist. Stell dir vor, du lernst Auto zu fahren. Strict Mode ist wie ein sehr gründlicher Fahrlehrer, der neben dir sitzt und jeden kleinen Fehler, den du machst, anspricht. Es ist nicht da, um dich zu tadeln, sondern um dir zu helfen, ein besserer Fahrer zu werden – oder in unserem Fall, ein besserer React-Entwickler.

Strict Mode ist ein Werkzeug, um potenzielle Probleme in deiner Anwendung hervorzuheben. Es aktiviert zusätzliche Prüfungen und Warnungen für seine Nachkommen. Sehen wir uns an, wie man es verwendet:

import React from 'react';
import ReactDOM from 'react-dom';

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

In diesem Beispiel umgeben wir unsere gesamte App Komponente mit React.StrictMode. Das bedeutet, dass alle Komponenten innerhalb von App diesen zusätzlichen Prüfungen unterzogen werden.

Nun, lassen Sie uns erkunden, was Strict Mode tatsächlich überprüft.

Unsichere Lebenszyklusverwendung

Was sind Lebenszyklen?

Bevor wir über unsichere Lebenszyklen sprechen, lassen Sie uns verstehen, was Lebenszyklen sind. In React durchlaufen Komponenten eine Reihe von Phasen von der Geburt (Montage) bis zum Tod (Demontage). Diese Phasen werden Lebenszyklen genannt.

Unsichere Lebenszyklen

Einige Lebenszyklusbethoden gelten als unsicher, weil sie zu Fehlern in asynchroner Renderung führen können. Strict Mode hilft dabei, ihre Verwendung zu identifizieren. Hier ist ein Beispiel:

class OldComponent extends React.Component {
componentWillMount() {
console.log("Diese Methode ist unsicher!");
}

render() {
return <div>Hello, I'm an old component!</div>;
}
}

Wenn du diese Komponente in Strict Mode verwendest, siehst du eine Warnung im Konsolenfenster über die Verwendung der unsicheren componentWillMount Lebenszyklusbethode.

Stattdessen solltest du sicherere Alternativen verwenden. Hier ist eine Tabelle der unsicheren Methoden und ihrer sicheren Alternativen:

Unsichere Methode	Sichere Alternative
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

Veraltete Ref-API-Verwendung

Was sind Refs?

Refs bieten eine Möglichkeit, auf DOM-Knoten oder in der Render-Methode erstellte React-Elemente zuzugreifen. Sie sind wie eine direkte Leitung zu einem bestimmten Teil deiner Benutzeroberfläche.

String-Refs (Veraltet)

In der Vergangenheit wurden Refs mit Strings erstellt, wie dies hier gezeigt wird:

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Click me!</button>;
}
}

Diese Methode wird als veraltet angesehen und kann Probleme verursachen. Strict Mode wird dich warnen, wenn du String-Refs verwendest.

Moderne Ref-Verwendung

Stattdessen solltest du das createRef API oder den useRef Hook verwenden:

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>Click me!</button>;
}
}

In diesem Beispiel verwenden wir React.createRef() um einen Ref zu erstellen, was viel sicherer und effizienter ist.

Veraltete findDOMNode-Verwendung

Was ist findDOMNode?

findDOMNode war eine Methode, die verwendet wurde, um im DOM-Baum nach einer bestimmten React-Komponenteninstanz zu suchen. Allerdings ist es jetzt veraltet, weil es potenzielle Probleme verursachen kann.

Beispiel der findDOMNode-Verwendung

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>I'm going to be red!</div>;
}
}

Dieser Code ändert die Hintergrundfarbe des divs auf rot. Allerdings wird die Verwendung von findDOMNode auf diese Weise nicht empfohlen, und Strict Mode wird dich warnen.

Moderne Alternative

Stattdessen solltest du Refs verwenden:

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>I'm going to be blue!</div>;
}
}

Dies erreicht das gleiche Ergebnis, aber auf eine sicherere, reactfreundlichere Weise.

Fazit

Und das war's, Leute! Wir sind durch das Land von Reacts Strict Mode gereist, haben seine Warnungen über unsichere Lebenszyklen, veraltete Ref-Verwendung und die dekretierte Methode findDOMNode erkundet. Denkt daran, dass Strict Mode dein freundlicher Nachbar-React-Entwicklertool ist, das immer da ist, um dir zu helfen, besseren, sichereren Code zu schreiben.

Als wir aufhörten, erinnerte ich mich an einen Schüler, der mir einmal sagte: "React ist wie ein streng, aber fördernder Elternteil – es setzt Regeln, um uns sicher zu halten, aber gibt uns auch die Freiheit, erstaunliche Dinge zu schaffen." Ich kann nicht zustimmen!

Weiter üben, weiter lernen und vor allem weiter codieren. Bis zum nächsten Mal, fröhliches React-ing!

Credits: Image by storyset