Reaktionskomponenten - Requisiten und Zustände in ReactJS mit Beispielen

'In React ist alles eine Komponente'

Wenn Sie mit React vertraut sind, müssen Sie diesen Satz oft gehört oder gelesen haben. Aber wissen Sie genau, was es bedeutet und wie es verwendet wird? Wenn Sie dies nicht tun, lesen Sie diesen Blog, um alles über React-Komponenten und die verschiedenen Phasen im Lebenszyklus zu erfahren. Ich bin mir sicher, wenn Sie fertig sind Wenn Sie diesen Blog lesen, haben Sie ein umfassendes Verständnis der React-Komponenten und der damit verbundenen Konzepte. Bevor Sie fortfahren, werfen Sie einen kurzen Blick auf die Themen, die ich diskutieren werde:

• Was sind Reaktionskomponenten?
• Vorteile von Reaktionskomponenten
• Requisiten
• Zustände
• Staaten gegen Requisiten
• Komponentenlebenszyklus reagieren

Was sind Reaktionskomponenten?

Früher mussten die Entwickler 1000 Codezeilen schreiben, um eine einfache Einzelseitenanwendung zu entwickeln. Die meisten dieser Anwendungen folgten der traditionellen DOM-Struktur, und Änderungen an ihnen waren sehr herausfordernd und eine mühsame Aufgabe für die Entwickler.Sie mussten manuell nach dem Element suchen, das die Änderung benötigte, und es entsprechend aktualisieren. Schon ein kleiner Fehler würde zu einem Anwendungsfehler führen. Darüber hinaus war die Aktualisierung von DOM sehr teuer. Daher wurde der komponentenbasierte Ansatz eingeführt. Bei diesem Ansatz wird die gesamte Anwendung in logische Blöcke unterteilt, die als Komponenten bezeichnet werden. React war einer der Rahmenbedingungen, die sich für diesen Ansatz entschieden haben.Wenn Sie vorhaben, Ihre Karriere in der Webentwicklung auszubauen, eröffnet Ihnen ein früher Start viele Möglichkeiten.

Lassen Sie uns nun verstehen, was diese Komponenten sind.

Reaktionskomponenten werden als Bausteine ​​der Benutzeroberfläche betrachtet. Jede dieser Komponenten befindet sich im selben Raum, wird jedoch unabhängig voneinander ausgeführt. Reaktionskomponenten haben ihre eigene Struktur, Methoden sowie APIs. Sie sind wiederverwendbar und können je nach Bedarf in Schnittstellen injiziert werden. Betrachten Sie zum besseren Verständnis die gesamte Benutzeroberfläche als Baum.Hier wird die Startkomponente zur Wurzel und jedes der unabhängigen Stücke wird zu Zweigen, die weiter in Unterzweige unterteilt sind.

Dies hält unsere Benutzeroberfläche organisiert und ermöglicht, dass die Daten- und Statusänderungen logisch von der Wurzel zu Zweigen und dann zu Unterzweigen fließen. Komponenten rufen den Server direkt von der Clientseite aus auf, sodass das DOM dynamisch aktualisiert werden kann, ohne die Seite zu aktualisieren. Dies liegt daran, dass Reaktionskomponenten auf dem Konzept von AJAX-Anforderungen basieren. Jede Komponente verfügt über eine eigene Schnittstelle, über die der Server aufgerufen und aktualisiert werden kann. Da diese Komponenten unabhängig voneinander sind, kann jede aktualisiert werden, ohne dass dies Auswirkungen auf andere oder die Benutzeroberfläche insgesamt hat.

Wir gebrauchen React.createClass () Methode zum Erstellen einer Komponente. Dieser Methode muss ein Objektargument übergeben werden, das die React-Komponente definiert. Jede Komponente muss genau eine enthalten machen() Methode. Dies ist die wichtigste Eigenschaft einer Komponente, die für das Parsen des HTML-Codes in JavaScript, JSX, verantwortlich ist. Dies machen() gibt die HTML-Darstellung der Komponente als DOM-Knoten zurück. Daher müssen alle HTML-Tags in einem umschließenden Tag innerhalb von eingeschlossen sein machen() .

Im Folgenden finden Sie einen Beispielcode zum Erstellen einer Komponente.

Installation von PHP unter Windows 10

import React from 'react' importiere ReactDOM aus der 'react-dom'-Klasse MyComponent erweitert React.Component {render () {return (
Ihre ID lautet {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Staaten gegen Requisiten

Komponentenlebenszyklus reagieren

React bietet verschiedene Methoden, die angeben, wann eine bestimmte Phase im Lebenszyklus einer Komponente eintritt. Diese Methoden werden als Lebenszyklusmethoden bezeichnet. Diese Lebenszyklusmethoden sind nicht sehr kompliziert. Sie können sich diese Methoden als spezialisierte Ereignishandler vorstellen, die an verschiedenen Punkten während der Lebensdauer einer Komponente aufgerufen werden. Sie können diesen Methoden sogar Ihren eigenen Code hinzufügen, um verschiedene Aufgaben auszuführen. In Bezug auf den Lebenszyklus der Komponente ist der Lebenszyklus in vier Phasen unterteilt. Sie sind:

1. Anfangsphase
2. Aktualisierungsphase
3. Requisiten wechseln die Phase
4. Ausstiegsphase

Jede dieser Phasen enthält einige Lebenszyklusmethoden, die nur für sie spezifisch sind. Lassen Sie uns nun herausfinden, was in jeder dieser Phasen passiert.

ein. Anfangsphase - Die erste Phase des Lebenszyklus einer React-Komponente ist die Anfangsphase oder die anfängliche Renderphase. In dieser PhaseDie Komponente beginnt ihre Reise und macht sich auf den Weg zum DOM. Diese Phase besteht aus den folgenden Methoden, die in einer vordefinierten Reihenfolge aufgerufen werden.

1. getDefaultProps (): Diese Methode wird verwendet, um den Standardwert von anzugeben this.props . Es wird aufgerufen, bevor Ihre Komponente überhaupt erstellt oder Requisiten des übergeordneten Elements übergeben werden.
2. getInitialState (): Diese Methode wird verwendet, umangeben der Standardwert von Dieser Staat bevor Ihre Komponente erstellt wird.
3. componentWillMount (): Dies ist die letzte Methode, die Sie aufrufen können, bevor Ihre Komponente in das DOM gerendert wird. Aber wenn du anrufst setState () Innerhalb dieser Methode wird Ihre Komponente nicht erneut gerendert.
4. machen(): Th Diese Methode ist für die Rückgabe eines einzelnen Root-HTML-Knotens verantwortlich und muss in jeder einzelnen Komponente definiert werden. Sie können zurückkehren Null oder falsch falls Sie nichts rendern möchten.
5. componentDidMount (): Sobald die Komponente gerendert und im DOM platziert wurde, wird dies Methode wird aufgerufen. Hier können Sie beliebige DOM-Abfragevorgänge ausführen.

b. Aktualisierungsphase - Sobald die Komponente zum DOM hinzugefügt wurde, können sie nur dann aktualisiert und neu gerendert werden, wenn eine Statusänderung auftritt. Jedes Mal, wenn sich der Status ändert, ruft die Komponente seine auf machen() nochmal. Jede Komponente, die sich auf die Ausgabe dieser Komponente stützt, ruft auch ihre auf machen() nochmal. Dies geschieht, um sicherzustellen, dass unsere Komponente die neueste Version von sich selbst anzeigt. Um den Status der Komponenten erfolgreich zu aktualisieren, werden die folgenden Methoden in der angegebenen Reihenfolge aufgerufen:

1. shouldComponentUpdate (): Mit dieser Methode können Sie das Verhalten Ihrer Komponente beim Aktualisieren selbst steuern. Wenn Sie von dieser Methode ein true zurückgeben,Die Komponente wird aktualisiert. Andernfalls, wenn diese Methode a zurückgibtfalschDie Komponente überspringt die Aktualisierung.
2. componentWillUpdate (): T.seine Methode heißt just bevor Ihre Komponente aktualisiert werden soll. Bei dieser Methode können Sie Ihren Komponentenstatus nicht durch Aufrufen ändern this.setState .
3. machen(): Wenn Sie false via zurückgeben shouldComponentUpdate () , der Code im Inneren machen() wird erneut aufgerufen, um sicherzustellen, dass sich Ihre Komponente ordnungsgemäß anzeigt.
4. componentDidUpdate (): Sobald die Komponente aktualisiert und gerendert wurde, wird diese Methode aufgerufen. Sie können jeden Code in diese Methode einfügen, den Sie ausführen möchten, sobald die Komponente aktualisiert wurde.

c. Requisitenwechselphase - Nach dem Die Komponente wurde in das DOM gerendert. Abgesehen von der Statusänderung wird die Komponente nur dann aktualisiert, wenn sich ihr Prop-Wert ändert. Praktisch funktioniert diese Phase ähnlich wie die vorherige Phase, aber anstelle des Staates werden die Requisiten behandelt. Somit hat diese Phase nur eine zusätzliche Methode aus der Aktualisierungsphase.

1. componentWillReceiveProps (): Diese Methode gibt ein Argument zurück, das den neuen Prop-Wert enthält, der der Komponente zugewiesen werden soll.
   Die übrigen Lebenszyklusmethoden verhalten sich identisch zu den Methoden, die wir in der vorherigen Phase gesehen haben.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. machen()
5. componentDidUpdate ()

d.Die Ausstiegsphase -Dies ist die letzte Phase des Komponentenlebenszyklus, in der die Komponente zerstört und vollständig aus dem DOM entfernt wird. Es enthält nur eine Methode:

1. componentWillUnmount (): Sobald diese Methode aufgerufen wird, wird Ihre Komponente dauerhaft aus dem DOM entfernt.Bei dieser Methode Y.Sie können alle Bereinigungsaufgaben ausführen, z. B. das Entfernen von Ereignis-Listenern, das Stoppen von Timern usw.

Es folgt das gesamte Lebenszyklusdiagramm:

Dies bringt uns zum Ende des Blogs über React Components. Ich hoffe, dass ich in diesem Blog klar erklären konnte, was React Components sind und wie sie verwendet werden. Sie können auf meinen Blog auf verweisen , falls Sie mehr über ReactJS erfahren möchten.

Wenn Sie sich in React ausbilden lassen und selbst interessante Benutzeroberflächen entwickeln möchten, lesen Sie die von Edureka, einem vertrauenswürdigen Online-Lernunternehmen mit einem Netzwerk von mehr als 250.000 zufriedenen Lernenden auf der ganzen Welt.

Hast du eine Frage an uns? Bitte erwähnen Sie es in den Kommentaren und wir werden uns bei Ihnen melden.