React.js für Anfänger - Requisiten und Zustand erklärt

React.js ist eine der am häufigsten verwendeten JavaScript-Bibliotheken, die jeder Front-End-Entwickler kennen sollte. Zu verstehen, was Requisiten und Zustand sind und welche Unterschiede zwischen ihnen bestehen, ist ein großer Schritt, um React zu lernen.

In diesem Blog-Beitrag werde ich erklären, was Requisiten und Status sind, und ich werde auch einige der am häufigsten gestellten Fragen dazu klären:

  • Was sind Requisiten?
  • Wie geben Sie Daten mit Requisiten weiter?
  • Was ist Staat?
  • Wie aktualisiere ich den Status einer Komponente?
  • Was passiert, wenn sich der Zustand ändert?
  • Kann ich state in jeder Komponente verwenden?
  • Was sind die Unterschiede zwischen Requisiten und Staat?
Wenn Sie ein absoluter Anfänger von React sind, habe ich eine Tutorial-Reihe über React für Anfänger.

Was sind Requisiten?

Requisiten stehen für Eigenschaften und werden zum Übertragen von Daten zwischen React-Komponenten verwendet. Der Datenfluss zwischen den Komponenten von React ist unidirektional (nur von Eltern zu Kindern).

Wie geben Sie Daten mit Requisiten weiter?

Hier ist ein Beispiel, wie Daten mithilfe von Requisiten übergeben werden können:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

Zunächst müssen wir einige Daten aus der übergeordneten Komponente definieren / abrufen und sie dem Attribut "prop" einer untergeordneten Komponente zuweisen.

"Name" ist hier eine definierte Requisite und enthält Textdaten. Dann können wir Daten mit Requisiten übergeben, als würden wir einer Funktion ein Argument geben:

const ChildComponent = (props) => { // statements };

Und schließlich verwenden wir die Punktnotation, um auf die Requisitendaten zuzugreifen und sie zu rendern:

return 

{props.name}

;

Sie können sich auch mein Video ansehen, um zu sehen, wie man Requisiten benutzt:

Was ist Staat?

React verfügt über ein weiteres spezielles integriertes Objekt namens state, mit dem Komponenten ihre eigenen Daten erstellen und verwalten können. Im Gegensatz zu Requisiten können Komponenten Daten nicht mit Status übergeben, sondern sie können sie intern erstellen und verwalten.

Hier ist ein Beispiel für die Verwendung von state:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Wie aktualisiere ich den Status einer Komponente?

Der Status sollte nicht direkt geändert werden, sondern kann mit einer speziellen Methode namens aufgerufen werden setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Was passiert, wenn sich der Zustand ändert?

OK, warum müssen wir verwenden setState( )? Warum brauchen wir überhaupt das Staatsobjekt selbst? Wenn Sie diese Fragen stellen, machen Sie sich keine Sorgen - Sie werden den Zustand bald verstehen :) Lassen Sie mich antworten.

Eine Änderung des Status erfolgt basierend auf Benutzereingaben, Auslösen eines Ereignisses usw. Außerdem werden Reaktionskomponenten (mit Status) basierend auf den Daten im Status gerendert. Staat enthält die anfänglichen Informationen.

Wenn sich der Status ändert, wird React informiert und rendert das DOM sofort neu - nicht das gesamte DOM, sondern nur die Komponente mit dem aktualisierten Status. Dies ist einer der Gründe, warum React schnell ist.

Und wie wird React benachrichtigt? Sie haben es erraten: mit setState( ). Die setState( )Methode löst den erneuten Rendervorgang für die aktualisierten Teile aus. React wird informiert, weiß, welche Teile geändert werden müssen, und erledigt dies schnell, ohne das gesamte DOM erneut zu rendern.

Zusammenfassend gibt es zwei wichtige Punkte, auf die wir bei der Verwendung von state achten müssen:

  • Der Status sollte nicht direkt geändert werden - der setState( )sollte verwendet werden
  • Der Status wirkt sich auf die Leistung Ihrer App aus und sollte daher nicht unnötig verwendet werden

Kann ich state in jeder Komponente verwenden?

Eine weitere wichtige Frage, die Sie möglicherweise zum Status stellen, ist, wo genau wir ihn verwenden können. In den frühen Tagen konnte state nur in Klassenkomponenten verwendet werden , nicht in Funktionskomponenten.

Deshalb wurden Funktionskomponenten auch als zustandslose Komponenten bezeichnet. Nach der Einführung von React Hooks kann state nun sowohl in Klassen- als auch in Funktionskomponenten verwendet werden.

Wenn Ihr Projekt keine React Hooks verwendet, können Sie den Status nur in Klassenkomponenten verwenden.

Was sind die Unterschiede zwischen Requisiten und Staat?

Lassen Sie uns zum Schluss noch einmal die Hauptunterschiede zwischen Requisiten und Zustand zusammenfassen:

  • Komponenten empfangen Daten von außen mit Requisiten, während sie ihre eigenen Daten mit Status erstellen und verwalten können
  • Requisiten werden zum Übergeben von Daten verwendet, während der Status zum Verwalten von Daten dient
  • Daten von Requisiten sind schreibgeschützt und können nicht von einer Komponente geändert werden, die sie von außen empfängt
  • Statusdaten können von einer eigenen Komponente geändert werden, sind jedoch privat (von außen nicht zugänglich)
  • Requisiten können nur von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden (unidirektionaler Fluss).
  • Das Ändern des Status sollte mit der setState ( )Methode erfolgen

React.js ist eine der heute am häufigsten verwendeten JavaScript-Bibliotheken, die jeder Front-End-Entwickler kennen sollte.

Ich hoffe, dieser Artikel hilft Ihnen, Requisiten und Zustand zu verstehen. Es gibt auch andere wichtige Dinge, die über React zu besprechen sind, und ich werde später in meinen folgenden Artikeln darüber schreiben.

Wenn Sie mehr über Webentwicklung erfahren möchten, folgen Sie mir auf Youtube !

Danke fürs Lesen!