Arten von ReactJs-Komponenten in der Programmierung

Was sind Komponenten in ReactJs?

Die Komponenten beziehen sich im Wesentlichen auf die grundlegende Einheit und die Bausteine ​​von React. Um es verständlicher zu machen, so wie alles auf der Welt aus Atomen besteht, sind die Komponenten nur die Bestandteile von ReactJS. Jede Anwendung oder Website, die mit ReactJS entwickelt wird, besteht aus verschiedenen Einheiten, die als Komponenten bezeichnet werden.

In der oben gezeigten Abbildung finden Sie mehrere Komponenten auf der Benutzeroberfläche der Website. Die Menüleiste ist eine Komponente, während die linke Featured-Spalte eine andere ist. Die Cookie-Box ist auch ein Bestandteil und der Hauptteil, der alle Informationen bereitstellt, ist wieder nur ein anderer. Die gesamte Benutzeroberfläche besteht also aus den verschiedenen Komponenten, um die Website für uns nützlich zu machen. Das UI der Website kann somit als übergeordnete Komponente betrachtet werden.

Arten von ReactJs-Komponenten in der Programmierung

1. Funktionelle Komponente

Funktionale Komponenten können einfach durch Schreiben der Javascript-Funktionen erstellt werden. Genauer gesagt sind die funktionalen Komponenten diejenigen Funktionen, die die Props aufnehmen und den JSX zurückgeben. Die funktionalen Komponenten können die Daten möglicherweise in Form von Parametern empfangen oder nicht. Darüber hinaus verfügen die funktionalen Komponenten nicht über die Lebenszyklusmethoden oder den Status, sie können jedoch durch einfaches Implementieren der React Hooks hinzugefügt werden. Die funktionalen Komponenten sind immer einfach zu debuggen, auszulesen und zu testen.

 // Functional Component Example import React from 'react'; const HelloWorld = () => { return ( <div> <p>Hello Emizen!</p> </div> ) } export default HelloEmizen;

Im obigen Codebild ist es eine einfache Komponente, die die konstante Variable „Hello Emizen“ trägt. Die konstante Variable wird der Pfeilfunktion zugewiesen, die den JSX zurückgibt. Die funktionalen Komponenten müssen keine Pfeilfunktion sein und können auch einfach mit den regulären JavaScript-Funktionen deklariert werden. Gleichzeitig können auch Props in die Funktion übergeben und so zum Rendern der Daten im JSX-Code verwendet werden.

2. Klassenkomponente

Die Class-Komponente ist die am häufigsten verwendete Komponente unter allen Typen. Der Grund dafür ist, dass die Klassenkomponente die Fähigkeit hat, jede Funktion der funktionalen Komponente und gleichzeitig auch einige zusätzliche Fähigkeiten auszuführen. Es kann auch die Hauptfunktionen von React, Requisiten, Zustands- und Lebenszyklusmethoden effizient nutzen. Allerdings sind die Klassenkomponenten im Vergleich zu den funktionalen Komponenten vergleichsweise komplexer. Die Daten können sehr einfach von einer Klassenkomponente zu einer anderen Klassenkomponente weitergegeben werden.

 // Klassenkomponenten-Beispielimport Reagieren von 'reagieren'; Klasse HelloWorld erweitert React.Component {
   rendern() {
      Rückkehr (
         <div>
            <p>Hallo Emizen!</p>
         </div>
      )
   }
}Standard HelloEmizen exportieren;

Im obigen Beispiel ist zu beobachten, dass die Klassenkomponente die extends React.Component nach der Klasse Hello Emizen . Dann ist auch die Methode render() erforderlich, um den JSX-Code zurückzugeben. In der Klassenkomponente kann man einen Zustand deklarieren, ihn auf das JavaScript-Objekt setzen und props verwenden, um sich in der Anfangsphase zu befinden und den Zustand in den Lebenszyklusmethoden zu ändern. Es erfordert, dass die React Hooks diese Aktionen nach funktionaler Komponente ausführen.

3. Reine Komponente

Reine Komponenten sind die einfachsten und schnellsten Komponenten, die jemand schreiben kann. Da reine Komponenten den Zustand verschiedener Variablen außerhalb ihres Geltungsbereichs nicht modifizieren oder von ihnen abhängen, können sie die einfachen funktionalen Komponenten leicht ersetzen. Die Komponenten, die lediglich die Renderfunktion zurückgeben, sind für reine Komponenten am besten geeignet. Der größte Anwendungsfall der Pure-Komponente ist die Bereitstellung von Optimierungen.

Der große Unterschied zwischen React.Component und React.PureComponent besteht darin, dass die reine Komponente einen flachen Vergleich zur Zustandsänderung aufweist. Die reinen Komponenten verwalten das shouldComponentUpdate() automatisch.

React-Komponenten werden meistens neu gerendert, wenn:

• setState() wird aufgerufen
• forceUpdate() wird aufgerufen
• props -Werte werden aktualisiert

4. Komponenten höherer Ordnung

Komponenten höherer Ordnung, auch als HOC bekannt, ähneln weniger einer React-Komponente als eher einem Muster, das Ergebnis der Kompositionsnatur von React. Der Hauptanwendungsfall von HOC besteht darin, die Logik mit anderen Komponenten zu teilen.

 // HOC Example import React from 'react'; import MyComponent from './components/MyComponent'; class HelloEmizen extends React.Component { render() { return( <div> {this.props.myArray.map((element) => ( <MyComponent data={element} key={element.key} /> ))} </div> ) } } export default HelloEmizen;

Das obige Codebild hat die einfache Komponente, um die übergeordnete Komponente zu beschreiben. Hier ist der Schlüsselcode this.props.myArray.map((element) => (<MyComponent />) . Diese Funktion gibt die Komponenten zurück. Die Anzahl der Komponenten hängt einfach von der Anzahl der Elemente im Array ab, die HOC genannt werden Die Funktion nimmt ein Array aus Zustand und bildet somit jedes Element im Array ab, indem sie jedes Element in die React-Komponente umwandelt.

Im Folgenden finden Sie den einfachen Ablauf der Komponenten höherer Ordnung:

1. Holen Sie sich die Daten von Requisiten oder Staat
2. Ordnen Sie das Array zu und geben Sie die Reach-Komponente für jedes Element zurück.

Wie rendert man eine ReactJs-Komponente?

Die folgenden Schritte können befolgt werden, um eine ReactJS-Komponente zu rendern:

• Zunächst wird eine gleichnamige ES6-Klasse erstellt, die React.Component erweitert.
• Es wird eine einzelne leere Methode namens render() hinzugefügt.
• Der Funktionsrumpf wird in die Methode render() verschoben.
• Ersetzen Sie die props durch this.props im render() Body.
• Löschen Sie am Ende die verbleibende leere Funktionsdeklaration.

Verschachtelungskomponenten reagieren

Eines der besten Dinge an React ist, dass die Komponenten ineinander verschachtelt werden können. Diese Funktion hilft erheblich bei der Erstellung einer komplexen Benutzeroberfläche. Hier werden die untergeordneten Komponenten in die übergeordneten Komponenten verschachtelt. Die Verschachtelung von Bauteilen ineinander wird als intern und extern bezeichnet.

• Exportieren : Wenn ein bestimmtes Modul oder eine bestimmte Datei exportiert und in einem anderen Modul verwendet wird, wird dies als Exportieren bezeichnet.
• Importieren : Wenn ein bestimmtes Modul oder eine bestimmte Datei importiert und in dem vorhandenen Modul verwendet wird, wird dies als Import bezeichnet.

Lebenszyklus der Reaktionskomponente

Die React-Web-Apps sind im Grunde die Sammlung der verschiedenen Komponenten, die unabhängig sind und auf der Grundlage von Interaktionen mit ihnen ausgeführt werden. Jede dieser Komponenten hat ihren eigenen Lebenszyklus. Der Lebenszyklus bezieht sich auf eine Reihe von Methoden, die in den verschiedenen Stadien der Existenz der Komponente erneut aufgerufen werden.

Jede React-Komponente hat grundsätzlich die folgenden drei Phasen:

1. Montage

Sobald die Initialisierung von Komponenten abgeschlossen ist, wird die Komponente auf DOM gemountet und auf der Webseite gerendert. Hier folgt React dem Standardverfahren nur für die Namenskonventionen der vordefinierten Funktionen. Die Funktionen, die „Will“ enthalten, repräsentieren vor einer bestimmten Phase. In ähnlicher Weise repräsentiert die Funktion, die „Did“ enthält, nach Abschluss der Phase. Die Montagephase der Komponenten besteht aus den folgenden zwei Funktionen:

• componentWillMount()-Funktion : Diese Funktion wird aufgerufen, bevor die Komponente auf DOM gemountet wird.
• componentDidMount() Funktion : Im Gegensatz zur vorherigen wird diese Funktion aufgerufen, nachdem die Komponente auf dem DOM gemountet wurde.

2. Aktualisierung

Aktualisierung ist im Grunde die Phase, in der die Zustände und Props einer Komponente aktualisiert werden, gefolgt von dem Ereignis oder Befehl des Benutzers, wie z und Befehle ihrer Benutzer.

3. Demontage

Es ist die Abschlussphase des Komponentenlebenszyklus. In dieser Phase werden die Komponenten aus dem DOM ausgehängt. Die folgende Funktion ist das einzige Mitglied dieser Funktion:

componentWillUnmount()-Funktion : Die Funktion wird aufgerufen, kurz bevor die Komponente vollständig aus dem DOM ausgehängt wird. Sie tritt auf, bevor die Komponente von der Seite entfernt wird und spendet somit das Ende des Lebenszyklus.

Wir hoffen, dass dieser Beitrag Ihnen eine grundlegende Vorstellung von den Arten von React-Komponenten und deren Verwendung gegeben hat. Emizentech ist ein führendes App-Entwicklungsunternehmen, das webbasierte, native und hybride mobile Apps entwickelt. Wenn Sie also jemals professionelle ReactJs-Entwickler benötigen, wenden Sie sich an uns.