Die Wahl zwischen Klassenkomponenten und funktionalen Komponenten in React treffen

Neuauflage von Plato

Verfolger: 0

Making the Choice Between Class Components and Functional Components in React PlatoBlockchain Data Intelligence. Vertical Search. Ai.

Kernunterschiede

In React ist eine Komponente ein Stück Code, das einen Teil einer Benutzeroberfläche darstellt. Es gibt zwei Haupttypen von Komponenten in React: Klassenkomponenten und funktionale Komponenten.

Klassenkomponenten werden mithilfe einer Klasse definiert, die die Klasse React.Component erweitert. Sie sind funktionsreicher und haben mehr Optionen für die Behandlung von Zustands- und Lebenszyklusereignissen. So sieht eine Klassenkomponente aus:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

Funktionale Komponenten sind einfach JavaScript-Funktionen, die ein React-Element zurückgeben. Sie sind einfacher als Klassenkomponenten und leichter zu lesen und zu schreiben. Hier ist die gleiche Komponente wie oben, geschrieben als funktionale Komponente:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Wann was zu verwenden

Im Allgemeinen sollten Sie funktionale Komponenten verwenden, es sei denn, Sie müssen eine Funktion verwenden, die nur in Klassenkomponenten verfügbar ist, z. B. Zustands- oder Lebenszyklusmethoden.
Es gibt ein paar Gründe warum Sie vielleicht bevorzugen Verwenden von Klassenkomponenten über funktionale Komponenten:

Ablesbarkeit: Klassenkomponenten können das Verständnis des Codes erleichtern, insbesondere wenn Sie viele Zustands- oder Lebenszyklusmethoden haben. Der Code ist in Methoden organisiert, die klar definiert und leicht zu finden sind.
Wiederverwendbarkeit: Klassenkomponenten können leichter wiederverwendet werden, da sie erweitert werden können, um neue Komponenten zu erstellen. Dies kann besonders nützlich sein, wenn Sie viele gemeinsame Funktionen zwischen Komponenten haben.
Organisation: Klassenkomponenten können die Organisation Ihres Codes vereinfachen, da Sie verwandte Methoden in derselben Komponente zusammenfassen können. Dies kann das Auffinden und Verwalten des Codes erleichtern.

Es gibt auch ein paar Gründe, warum Sie sich für das Schreiben entscheiden sollten Funktionskomponenten:

Wenn Sie keine Zustands- oder Lebenszyklusmethoden verwenden müssen: Wenn Sie keine Zustands- oder Lebenszyklusmethoden verwenden müssen, ist eine funktionale Komponente eine gute Wahl, da sie einfacher zu lesen und zu schreiben ist als eine Klassenkomponente.
Wenn Sie eine reine Komponente benötigen: Funktionale Komponenten sind „reine“ Komponenten, dh sie hängen nur von ihren Props ab und haben keinen eigenen Zustand. Dies kann nützlich sein, wenn Sie sicherstellen möchten, dass eine Komponente nur dann neu gerendert wird, wenn sich ihre Requisiten ändern.
Wenn Sie die Leistung optimieren möchten: Da funktionale Komponenten rein sind, können sie einfacher von React optimiert werden, was zu einer besseren Leistung führen kann.
Wenn Sie prägnanten, leicht lesbaren Code schreiben möchten: Da funktionale Komponenten einfacher sind und weniger bewegliche Teile haben, können sie einfacher zu lesen und zu verstehen sein, insbesondere wenn Ihre Anwendung viele Komponenten enthält.

Im Allgemeinen sollten Sie funktionale Komponenten verwenden, es sei denn, Sie haben einen bestimmten Bedarf, der nur mit einer Klassenkomponente erfüllt werden kann.

useEffect & useState

Es ist jedoch wichtig zu beachten, dass Sie Zustands- und Lebenszyklusmethoden auch in funktionalen Komponenten verwenden können, indem Sie die verwenden useState und useEffekt Haken. Im Allgemeinen sollten Sie den Komponententyp auswählen, der für Ihre Anforderungen am sinnvollsten ist und der Ihren Code am einfachsten zu lesen und zu verstehen macht.

Wenn Sie dennoch Zustands- oder Lebenszyklusereignisse implementieren möchten, haben Sie die Möglichkeit, Hooks zu verwenden, um Ihre Komponente zu aktivieren.

So würden Sie implementieren useEffekt und useState in Ihren funktionalen Komponenten

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Hier haben wir eine Komponente, die eine Zählung verfolgt und die aktuelle Zählung für den Benutzer anzeigt. Die Komponente verwendet die useState Hook, um der funktionalen Komponente einen Zustand hinzuzufügen, und die useEffekt Hook zum Ausführen einer Aktion (Aktualisieren des Dokumenttitels), wenn sich die Anzahl ändert.

Key Take Away

Dies sind die wichtigsten Erkenntnisse, wenn es darum geht, zwischen Klassenkomponenten und funktionalen Komponenten in React zu wählen:

Klassenkomponenten werden mithilfe einer Klasse definiert, die die React.Component-Klasse erweitert, und verfügen über mehr Optionen für die Behandlung von Zustands- und Lebenszyklusereignissen.
Funktionale Komponenten sind nur JavaScript-Funktionen, die ein React-Element zurückgeben und einfacher und einfacher zu lesen und zu schreiben sind.
Sie sollten funktionale Komponenten verwenden, es sei denn, Sie müssen eine Funktion verwenden, die nur in Klassenkomponenten verfügbar ist, z. B. Zustands- oder Lebenszyklusmethoden.
Sie können die Hooks useState und useEffect verwenden, um Zustände hinzuzufügen und Nebeneffekte in funktionalen Komponenten auszuführen.
Insgesamt hängt die Wahl zwischen Klassenkomponenten und funktionalen Komponenten davon ab, was für Ihre Anforderungen am besten geeignet ist und was Ihren Code am einfachsten zu lesen und zu verstehen macht.

Ich hoffe, diese kurze Erklärung wird Ihnen helfen. Wenn Sie Mentoring oder Anleitung auf Ihrem Weg zum Erlernen von Javascript, React oder Webentwicklung im Allgemeinen wünschen, können Sie mich gerne für eine 1:1-Sitzung kontaktieren.