Props und State React.JS

Klar! Lassen Sie uns tiefer in Requisiten und Zustände in React eintauchen, ihre Rollen untersuchen, wie sie sich unterscheiden und detailliertere Beispiele liefern.

Requisiten (Eigenschaften)

1. Definition: Props sind die Abkürzung für Properties. Sie sind eine Möglichkeit, Daten von einer Komponente an eine andere weiterzugeben, normalerweise von einer übergeordneten Komponente an eine untergeordnete Komponente.

2. Eigenschaften:

Schreibgeschützt: Sobald eine untergeordnete Komponente festgelegt ist, kann sie ihre Requisiten nicht mehr ändern. Sie sind innerhalb der untergeordneten Komponente unveränderlich.
Wird zur Konfiguration verwendet: Mit Requisiten können Sie das Verhalten und Erscheinungsbild von Komponenten anpassen.
Datenfluss: Requisiten ermöglichen den Fluss von Daten und Funktionen entlang der Komponentenhierarchie und fördern so die Wiederverwendbarkeit.
3. Verwendung:Sie können jede Art von Daten über Requisiten übergeben, einschließlich Zeichenfolgen, Zahlen, Objekte, Arrays und Funktionen.

Beispiel für Requisiten:

// ParentComponent.js
function ParentComponent() {
  const message = "Hello, Child!";

  return <ChildComponent greeting={message} />;
}

// ChildComponent.js
function ChildComponent(props) {
  return <h1>{props.greeting}</h1>;
}

In diesem Beispiel:

• Die ParentComponent übergibt die Zeichenfolge „Hallo, Kind!“ an ChildComponent über eine Requisite namens Greeting.
• ChildComponent empfängt diese Requisite und zeigt sie in einem

  Tag.

Zustand

1. Definition: State ist ein integriertes React-Objekt, das Informationen über den aktuellen Zustand der Komponente enthält. Im Gegensatz zu Requisiten wird der Status innerhalb der Komponente selbst verwaltet.

2. Eigenschaften:

Veränderlich: Der Zustand kann mit Funktionen wie setState (für Klassenkomponenten) oder dem useState-Hook (für Funktionskomponenten) geändert werden.
Lokal zur Komponente: Der Status ist spezifisch für die Komponente, in der er definiert ist, und ist von anderen Komponenten aus nicht zugänglich, es sei denn, er wird angehoben.
Reaktivität: Zustandsänderungen lösen ein erneutes Rendern der Komponente aus, was dynamische Aktualisierungen in der Benutzeroberfläche ermöglicht.
3. Verwendung: Der Status wird häufig zum Verwalten von Benutzereingaben, zum Verfolgen des Status einer Komponente und zum Reagieren auf Benutzerinteraktionen verwendet.

Beispiel für einen Staat:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In diesem Beispiel:

• Die Counter-Komponente behält ihren eigenen Zustand namens count bei, der auf 0 initialisiert wird.
• Wenn auf die Schaltfläche geklickt wird, aktualisiert die setCount-Funktion den Zählstatus, wodurch die Komponente neu gerendert wird und die neue Zählung anzeigt.

Zusammenfassung

• Requisiten dienen der Weitergabe von Daten im Komponentenbaum und sind schreibgeschützt. Sie helfen dabei, wiederverwendbare Komponenten zu erstellen, die individuell angepasst werden können.
• Status dient der Verwaltung des internen Status einer Komponente und kann aktualisiert werden, was zu dynamischem Verhalten und Rendering führt.

Das Verständnis der Unterscheidung zwischen Requisiten und Zustand ist für die Erstellung effektiver und organisierter React-Anwendungen von entscheidender Bedeutung. Wenn Sie weitere Fragen haben oder zu irgendeinem Teil weitere Erläuterungen benötigen, können Sie uns gerne fragen!

Das obige ist der detaillierte Inhalt vonProps und State React.JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!