Wie Unterscheidet Man React-Funktionskomponenten von Klassen-Komponenten

Inhaltsverzeichnis

1. Was sind React-Komponenten?
2. React-Funktionskomponenten – Eine Einführung
3. Wie verwendet man React Funktionskomponenten?
4. Einführung in Klassen-Komponenten in React
5. Wie verwendet man React Klassen-Komponenten?
6. Unterschiede zwischen Funktions- und Klassen-Komponenten
7. Warum Funktionskomponenten VS-Klassen-Komponenten verwenden?

Was sind React-Komponenten?

Komponenten sind ein integraler Bestandteil der Benutzeroberfläche und werden für deren Erstellung gebraucht. Einer der Gründe, warum Komponenten wichtig sind, ist ihre Wiederverwendbarkeit. Das bedeutet, dass Sie eine Komponente an beliebiger Stelle der Benutzeroberfläche so oft wie Sie wollen, verwenden können.

Bei der React Entwicklung kommen zwei Arten von Komponenten zum Einsatz: Klass- und Funktional. Beide Arten von Komponenten haben unterschiedliche Anwendungsfälle und Vorteile. Dabei sind Funktionskomponenten statusfrei und die Klassen-Komponenten zustandsbehaftet. Außerdem unterscheiden sie sich in Syntax, Logik und einigen anderen entwicklungsbezogenen Aspekten. Wir untersuchen diese Unterschiede, um Klassen- und Funktionskomponenten besser zu verstehen und sie in Ihrem Code zu verwenden.

Wir können zwei Arten von React-Komponenten erstellen;

• Funktions-Komponente
• Klassen-Komponente

Auf der Suche nach einer neuen Herausforderung?

Interessante Projekte

Zuverlässige Arbeitgeber

Faire Vergütung

Kontakt aufnehmen

React-Funktionskomponenten – Eine Einführung

Funktionale Komponenten in React werden am häufigsten verwendet, und als Entwickler werden Sie ihnen häufig begegnen oder sie schreiben müssen. Dies sind grundlegende JavaScript-Funktionen; sie sind typischerweise Pfeilfunktionen und können auch mit dem Standard-Schlüsselwort function in React erstellt werden. Eine der wichtigsten oder, wie wir sagen können, eine wesentliche Aufgabe der funktionalen Komponenten beim Rendern der UI. Deshalb können wir sie auch als stumme oder zustandslose Komponenten bezeichnen, da sie Daten akzeptieren und sie in irgendeiner Form auf der Oberfläche erscheinen lassen. In technischen Worten, die funktionalen Komponenten akzeptieren Eigenschaften oder Requisiten in einer Argumentform und geben dieselben in einer gültigen JSX-Form zurück. Hier ist ein Beispiel für Sie:

Dies ist die einfachste Form der funktionalen Komponenten in React.

Den funktionalen Komponenten in React fehlen Zustand und Lebenszyklusmethoden. Da sie nicht mit Lebenszyklusaspekten integriert sind, werden die funktionalen Komponenten zu zustandslosen oder stummen Komponenten. Einer der Hauptzwecke der funktionalen Komponenten ist die UI-Präsentation in einer benutzerzentrierten Form. Wie zum Beispiel eine Schaltflächenkomponente für den Endbenutzer aussieht, kann durch die funktionalen Komponenten von React bestimmt werden.

Props oder Eigenschaften sind integraler Bestandteil von React-Komponenten. Props geben die Informationen von Komponente zu Komponente weiter, was für den Aufbau einer dynamischen Benutzeroberfläche notwendig ist. Allerdings sind Props schreibgeschützt, was bedeutet, dass die React-Komponenten ihre Eingaben nicht ändern müssen und dass die gleichen Props das gleiche Ergebnis zurückgeben. Die Komponenten, die dieser Sequenz folgen, werden als reine Komponenten bezeichnet, und funktionale Komponenten sind tatsächlich reine Komponenten. Wie wir bereits gesagt haben, gibt es zwei Möglichkeiten, die Komponenten in React zu schreiben, den typischen Stil, der JSX als spezielle Erweiterung verwendet. Die zweite ist die Arrow-Funktion. Codeskripte, die mit Arrow Function geschrieben wurden, sind kompakt und einfacher zu schreiben und zu lesen. Darüber hinaus ist die Syntax von Arrow kontextlos, da sie „dies“ an den Codekontext in der Umgebung bindet.

Wie verwendet man React Funktionskomponenten?

Die Verwendung von funktionalen Komponenten kann viele Formen und Strukturen annehmen, je nachdem, welche Ausgabe Sie wünschen. Für eine solche einfache „Greet“-Komponente, die erstellt wurde, um ein „Hallo“ an den Endbenutzer zu senden, müssen Sie eine „Greet“-Funktion erstellen und diese in die Hauptanwendung exportieren. Dies lässt uns zu dem Schluss kommen, dass eine Funktionskomponente die einfachste Art und Weise bietet, sich mit dem Rendering-Teil des Anwendungsentwicklungsprozesses zu beschäftigen und eine Schnittstelle zu schaffen. Darüber hinaus verwenden wir die Funktionskomponente für:

• Requisiten: Eigenschaften liefern eine Antwort auf die Funktion, indem die Komponente über DOM-Attribute zurückgegeben wird.
• Verwendung von Hooks: Hooks sind durch die Verwendung von this.state() und this.setstate() in React gekennzeichnet. Diese werden für die Verwaltung des internen Zustands der Komponente verwendet. Der gleiche Vorgang in funktionalen Komponenten wird als Hook bezeichnet. Diese Funktionen werden als Hooks bezeichnet, da sie sich an die React-Engine anhängen, um die usestate-Funktion zu importieren.
• Lebenszyklus-Ereignisse: Innerhalb dieser sorgt useEffect dafür, dass die React-Engine in die Funktion der Komponente eingreifen und die gewünschte Aktion, die einen Effekt auslöst, ermöglichen kann.

useEffect ist in einer der vier Instanzen anwendbar:

• Rendering-Komponente;
• Führt eine Aktion aus, wenn die Komponente zum ersten Mal gerendert wird;
• Eine Aktion ausführen, wenn eine bestimmte Variable aktualisiert wird;
• Aktion zum Aufräumen.

Diese vier Aktionen können durch die Syntax impost useEffect ermöglicht werden, und dieselbe wird mit einer Return-Funktion zurückgerufen. Die funktionalen Komponenten in React sind sehr wertvoll in Fällen, in denen Sie die Zustandsverwaltung von den Komponenten trennen möchten.

Einführung in Klassen-Komponenten in React

Die Class-Syntax wird verwendet, um eine React-Komponente zu definieren, und sie ist einer der am häufigsten verwendeten Teile von React. Die Klassen-Komponente ist ausführlicher als die oben besprochene funktionale Komponente, aber sie bietet auch eine bessere Kontrolle und Funktionalität in Bezug auf die Entwicklung.Klassen-Komponenten in React nutzen ES6-Klassen, die auf die Komponentensyntax erweitert wurden. Sie werden als intelligente und zustandsbehaftete Komponenten bezeichnet, weil die Klassen-Komponenten eine Logik und einen definierten Zustand hinter ihrer Operation haben. Hier können Sie die React-Lifecycle-Methoden innerhalb der Klassen-Komponenten verwenden und Eigenschaften (props) übergeben, die mit this.props auf dieselben zugreifen.

React-Klassen-Komponenten werden in der Mehrzahl der heute gebauten Webanwendungen verwendet. Sie sind zwar einfache Klassen, fügen der Anwendung aber eine große Menge an Funktionalität und Funktionen hinzu. Infolgedessen werden Klassen zur Erstellung von Objekten in Anwendungen mit verschiedenen Eigenschaften verwendet. Das Erstellen einer Klassen-Komponente in React kann mit der Klassendeklaration Class A{} und dem Klassenausdruck, der mit const A = class{} dargestellt wird, durchgeführt werden. Weiter geht es mit den Klassenfunktionen, die ähnlich wie die funktionalen Komponenten mit Eigenschaften oder Props arbeiten. Um sie zu übergeben, müssen wir eine Syntax verwenden, die der von HTML ähnelt. Das bedeutet, dass wir this.props.name innerhalb des render()-Körpers verwenden müssen, um die Requisiten einzufügen und ihre Funktionalität zu verwalten.

Wie wir bereits gesagt haben, sind die Klassen-Komponenten zustandsabhängig. Der Zustand eines Objekts, den wir in der Entwicklungsübung beobachten, enthält einige Informationen und steuert das Verhalten der Komponente. Der Zustand unterscheidet sich von den Props, da ersterer Daten enthält, die im Laufe der Zeit geändert werden können, im Gegensatz zu den Props, die nicht geändert werden können. Infolge der geänderten Daten kann die Komponente auch ein anderes Ergebnis wiedergeben.

Wie verwendet man React Klassen-Komponenten?

Klassen-Komponenten in React sollen mit einem Klassenleiter versehen werden, einer spezialisierten JavaScript-Methode, die sie mit Event-Handlern bindet. Diese Bindung zwischen Klassen-Komponente und Klassenleiter wird auch verwendet, um den lokalen Zustand der Komponente zu initialisieren. Um die Konstruktorfunktion innerhalb der React-Komponente zu verwenden, müssen wir super(props) vor constructor() hinzufügen. Dadurch stellen wir mit super(props) eine Referenz auf die parent constructor()-Funktion innerhalb der Basisklasse von React her.

Das Erstellen einer Klassen-Komponente in React ist einfach. Ihre Aufgabe ist es, eine Klasse zu definieren, die die Komponentenfunktion hinzufügt und somit eine Renderfunktion hat.

Klassen-Komponenten in React können auf den Komponentenstatus zugreifen, was in funktionalen Komponenten nicht möglich ist. Kommen wir zu den Lifecycle-Hooks: In funktionalen Komponenten können Sie insgesamt sieben Lifecycle-Methoden verwenden;

• componentWillMount
• componentDiMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDiUpdate
• componentWillUnmount

Klassen-Komponenten haben bessere und mehr vordefinierte Methoden sowie Eigenschaften. Sie sind jedoch möglicherweise nicht mit allen Browsern kompatibel, da die ES6-Klassen relativ neu sind und nicht universell übernommen wurden.

Unterschiede zwischen Funktions- und Klassen-Komponenten

•  Zustand und Lebenszyklus. The Die Klassen-Komponenten in React, wie wir oben gesehen haben, bieten dem Entwickler verschiedene State- und Lifecycle-Funktionen. Für den State haben wir setstate() und für die Lifecycle-Methoden gibt es componentDiMount() und componentWillUnmount(). Aber die funktionalen Klassen sind nicht in der Lage, irgendetwas davon zu tun. Funktionale Komponenten sind einfache JavaScript-Funktionen. Sie haben die Aufgabe, die Props anzunehmen und die React-Elemente mit Hilfe von JSX zurückzugeben. Die Class-Komponenten hingegen erweitern React.Component um eine Rendering-Methode. Da die State- und Lifecycle-Methoden aus der React.Component hervorgehen, ist ihr Nutzen auf React.Class-Komponenten beschränkt.
• Syntax. Die Syntax ist die sichtbarste Form des Unterschieds zwischen Klassen- und Funktionskomponenten. Während die Funktionskomponenten auf JavaScript-Funktionen basieren, bilden die Klassen-Komponenten eine erweiterte Version von React.Component.

Funktionskomponente Syntax

Klassen-Komponente Syntax

Wenn wir im Fall der Klassen-Komponente eine Rückkehr zum Kontext in der h1-Überschrift benötigen, müssen wir render() innerhalb der Klassen-Komponente verwenden.

• Zustandsumgang. In der Funktionskomponente verwenden die Komponenten in React den useState()Hook. Zusätzlich wird dem Zustand mit setCount() ein Anfangszustand von count zugewiesen. Ab hier erhöht sich die Anzahl mit jedem Klick auf eine Schaltfläche. Die Komponente wird entsprechend der Anzahl der Klicks zurückgegeben.

In der Klassen-Komponente liegen die Dinge anders, da wir hier die Funktion setState() verwenden und außerdem einen Konstruktor und das Schlüsselwort this zur Verarbeitung benötigen.

•  Lebenszyklus. Ab der Version Rect 16.8 können die Entwickler mit der Lifecycle-Methode von Komponenten arbeiten. Damit haben sie die Kontrolle über funktionale Komponenten und können die Lebensphasen ändern. Dazu gehören Änderungen bei der Initialisierung, beim Einhängen, Aktualisieren, Aushängen usw.
• Leistung. In Bezug auf die Leistung werden die funktionalen Komponenten als besser angesehen, da sie zwei Eigenschaften haben;
  – type(Zeichenkette)
  – props(Objekt)

In der Funktionskomponente muss React die Funktion aufrufen und Eigenschaften übergeben, damit sie funktioniert. Bei Klassen-Komponenten können die Dinge etwas komplizierter werden, da die Konstruktor-Komponente und React.Component mit im Spiel sind. So wird die Manipulation und das Arbeiten mit Lifecycle-Komponenten komplizierter.

Es gibt bemerkenswerte Unterschiede in den beiden Rect-Komponenten. Wo eine Funktionskomponente kurz und einfacher ist, kann die Klassen-Komponente etwas verwirrend sein. Aus diesem Grund ist auch der Entwicklungs- und Testteil bei Funktionskomponenten einfacher als bei Klassen-Komponenten.

Warum Funktionskomponenten VS-Klassen-Komponenten verwenden?

In der Entwicklungsbranche gibt es eine klare Abgrenzung. Programmierer verwenden lieber Funktionskomponenten als Klassen-Komponenten. Hier sind die Gründe dafür;

• Einfach zu begründen: Das Erstellen des Codes und das Lesen desselben ist mit funktionalen Komponenten einfacher. Entwickler müssen mehr Zeit damit verbringen, ihren Code zu lesen als zu schreiben. Funktionale Komponenten sind einfach zu lesen, weil man weiß, was sie können und was nicht. Mit den Requisiten und HTML-Elementen, die in diesen Elementen arbeiten, wissen Sie, was reingeht und was rauskommt.
• Die Leistung ist besser: Funktionale Komponenten sind leistungsfähiger als Klassen-Komponenten. In kleineren Webanwendungen werden Sie den Unterschied vielleicht nicht bemerken, aber Sie werden die langsame Geschwindigkeit von Klassen-Komponenten in größeren und komplexeren Anwendungen feststellen.
• Einfaches Testen: Bei Functional sind Komplimente und Ausgaben vordefiniert. Aus diesem und anderen ähnlichen Gründen wird es einfacher, den Code zu testen. Außerdem müssen sich die Entwickler nicht um die versteckten Zustandsauswirkungen kümmern.
• Reduzierte Kopplung: Kopplung beschreibt den Grad der Abhängigkeit zwischen zwei Entitäten. Ein Codeskript mit geringer Kopplung ist in Zukunft leichter zu bearbeiten oder zu skalieren. Und zwar aus dem einfachen Grund, dass durch die Änderung eines Bereiches des Codes die anderen Bereiche nicht betroffen sind.

Zusammenfassung

Nach unserer obigen Diskussion könnte es den Anschein haben, dass die Verwendung von Klassen-Komponenten langwierig, kompliziert und eine komplexe Übung ist. Auch wenn dies wahr ist, gibt es einen Grund, warum sie in die Welt der React-Entwicklung aufgenommen wurde.

Mit dem Hinzufügen von Hooks und Lifecycle-Methoden können Sie jedoch den Anwendungsbereich von Class-Komponenten erweitern, um ein besseres Benutzererlebnis zu bieten. Außerdem werden Entwickler, die mit objektorientierter Programmierung vertraut sind, Klassen-Komponenten als besser und einfacher zu bedienen empfinden als funktionale Komponenten.

Es hängt also von der Aufgabe, Ihrer Erfahrung und Ihrem Verständnis der Sprache ab, ob Sie sich für Klassen- oder funktionale Komponenten entscheiden. Beide Arten von React-Komponenten haben ihre Vor- und Nachteile, aber es ist auch eine Frage der Perspektive.

React hat eine Revolution in der Entwicklung von Webanwendungen gebracht. Wenn Sie auf Probleme bei der Entwicklung stoßen und Hilfe brauchen, lassen Sie es uns wissen. Wir können Ihnen helfen, Ihre Entwicklungsprobleme zu lösen oder eine Webanwendung für Sie zu bauen.