React props vs state - Unterschiede und Design Patterns

1. React state
2. React props
3. Verbindung zwischen state und props in React
4. Wann sollte man state vs. props in React verwenden

React ist eines der am einfachsten zu erlernenden JavaScript-Frameworks. Diese Bibliothek führt jedoch einige Konzepte ein, die auf den ersten Blick verwirrend erscheinen können. Viele Neulinge haben beispielsweise Schwierigkeiten, den Unterschied zwischen props und state zu verstehen. In diesem Artikel erfahren Sie, warum diese beiden Objekte notwendig sind und wie Sie die beste Verwendung für sie finden.

React state

Das Zustandskonzept ist nicht nur auf React oder andere JavaScript-Frameworks beschränkt, die es verwenden. Sogar einige Anwendungen, die mit Vanilla-JavaScript erstellt wurden, können einen Status haben. In React ist das Konzept etwas anders, basiert aber auf dem gleichen Prinzip.

Jede React-Komponente behält ihr lokales Zustandsobjekt bei. Die staatliche Verwaltung erfolgt intern. Das Zustandsobjekt ist veränderbar; seine Mutation ist der Schlüssel zur Entwicklung dynamischer React-Komponenten, die sich als React auf die Aktionen des Benutzers ändern.

Die Elternkomponente kann den Zustand ihrer Kinder nicht ändern. Sie können sich Zustandswerte als lokale Variablen in den einfachen JavaScript-Funktionen vorstellen. Diese Variablen sind auf den Funktionsumfang beschränkt.

In React besteht der Hauptzweck des Zustandsobjekts darin, die Pflege aller Daten zu vereinfachen, die unsere dynamischen Anwendungen antreiben. Alle Änderungen der Zustandsobjektwerte lösen ein erneutes Rendern der Komponente aus. Auf diese Weise wird die Benutzeransicht immer sofort aktualisiert, wenn sich die Benutzereingabe ändert.

React props

Das Objekt props (kurz für properties) wird verwendet, um die Daten der Elternkomponenten mit ihren Kindern zu teilen. Sie können sich props als die Einstellungen vorstellen, die an die Komponente übergeben werden, um ihr Verhalten anzupassen. Stellen Sie sich vor, Sie haben eine <Bargraph/>-Komponente, die ein Bild rendert. Solche Komponenten erfordern Zahlen, um einen Graphen zu rendern. Jeder Graph rendert unterschiedliche Daten, die über props in ihn eingespeist werden können. Dies ist nur ein Beispiel dafür, wie props die Wiederverwendbarkeit der Komponente erleichtern.

Jede Komponente erhält ein props-Objekt, das innerhalb der Komponente unveränderlich ist. Doch so wie Sie Funktionen verschiedene Argumente übergeben können, können viele Instanzen derselben Komponente über props unterschiedliche Werte erhalten.

Unter der Haube verwendet React die Methode React.createElement(), um React-Komponenten zu erstellen und die props weiterzugeben. React-Entwickler neigen jedoch dazu, die bekanntere JSX-Syntax zum Erstellen von React-Anwendungen zu verwenden. Diese HTML-ähnliche Syntax bietet eine lesbarere Möglichkeit, die props weiterzugeben:

const Graph=(props)=>
{
  return <div>
          <h1>{props.data.percentage}%</h1>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"}
    }
  }
  render() {
    return <Graph data={this.state.data}>Hi! Try edit me</Graph>;
  }
}

Dies ist eine ziemlich einfache Demonstration der Funktionsweise von props. Zuerst definieren wir eine untergeordnete Komponente. Wie Sie sehen, behält die untergeordnete Komponente ihren Zustand nicht bei. Er liest nur die ihm über die props übergebenen Daten.

Als nächstes haben wir eine übergeordnete Komponente. Im Gegensatz zur untergeordneten Komponente verwendet sie die Daten ihres state-Objekts, um sie als Requisite weiterzugeben. Wie Sie sehen, ist die JSX-Syntax nicht mit normalem HTML identisch.

React props Destrukturierung

Wie Sie im obigen Beispiel sehen können, akzeptiert jede funktionale Komponente ein props-Argument. Auf die im Objekt props gespeicherten Daten kann zugegriffen werden, indem die Eigenschaft mit demselben Namen wie das Attribut in JSX gelesen wird.

Eine einfachere Möglichkeit wäre, die props innerhalb der Funktionsdefinition zu destrukturieren. Hier ist ein Beispiel für eine Graph-Funktionskomponente mit destrukturierten props:

const Graph=({data = { percentage: 50 } })=>
{
  return <div>
          <h1>{{data.percentage}}%</h1>
         </div>;
}

Auf diese Weise können Sie eine einfachere Syntax verwenden und sogar Standard-Prop-Werte festlegen. Wenn die untergeordnete Komponente keine props empfängt, kann die Komponente stattdessen den Standardwert lesen.

Verbindung zwischen state und props in React

Wie bereits erwähnt, ist das Objekt props innerhalb der React-Komponente strikt unveränderlich. Es gibt jedoch einen Vorbehalt: Untergeordnete Komponenten können den Zustand in der übergeordneten Komponente verändern, die als Quelle für Daten verwendet wird, die durch props an das untergeordnete Element zurückgegeben werden. Wenn dies schwer zu verstehen ist, sehen wir uns dieses Codebeispiel an:

const Graph=(props)=>
{
  const {handler, color} = props
  return <div 
         style={{width: "400px", height: "400px", border: "2px solid black", backgroundColor: `${color}`}}>                     
         <h1>{props.data.percentage}%</h1>
         <input type="text" onChange={(e) => handler(e)}/>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"},
      bgColor: "black"
    }
  }
  render() {
    const backgroundHandler = (e) => this.setState({color: e.target.value})     
    return <Graph data={this.state.data} color={this.state.bgColor} handler={backgroundHandler}>
            Hi! Try edit me</Graph>;
  }
}

In diesem Beispiel haben wir immer noch dieselben beiden Komponenten, die wir zuvor verwendet haben. Über die props übergeben wir einen Event-Handler. Dann verwenden wir denselben Handler, um die Eigenschaft color im Zustand der Elternkomponente zu aktualisieren. Sobald sich der Wert im Zustand der übergeordneten Komponente geändert hat, wird sie erneut gerendert und einen aktualisierten Farbwert an unsere untergeordnete Komponente weitergegeben.

Dies mag so aussehen, als ob die untergeordnete Komponente ihre eigenen props aktualisiert, aber in diesem Beispiel verwendet sie tatsächlich den über die props übergebenen Event-Handler, um die Quelle ihrer eigenen props zu aktualisieren - den Wert der Eigenschaft color im Zustand der übergeordneten Komponente.

Hier ist ein Link zu Playcode. Probieren Sie es selbst aus - geben Sie die Farbe in das Textfeld ein und sehen Sie, was passiert.

Dies ist ein Paradebeispiel dafür, wie properties und state miteinander verbunden sind. Der Zustand der Elternkomponente ist normalerweise die Datenquelle, die über die props an alle ihre Kinder weitergegeben wird.

In unserem Beispiel wird der Zustandswert, der in der Zustandseigenschaft bgColor gespeichert ist, zu einer color-Requisite.

Dieses Beispiel zeigt, dass state und props nur zwei Möglichkeiten sind, die Daten zu speichern und ihren Fluss zu verwalten.

Wann sollte man state vs. props in React verwenden

Es ist keine Wahl zwischen dem einen oder dem anderen - es ist üblich, dass Komponenten den state beibehalten und auch props empfangen. Im Staat gespeicherte Daten werden oft zu props für die Komponenten der Kinder. Die props sind nicht auf Daten beschränkt - sie können auch Callback-Funktionen enthalten.

Um eine einfach zu verwaltende React-App zu erstellen, verwenden Sie den Zustand für die Komponenten, die sich oben im Komponentenbaum befinden. Alle anderen Komponenten sollten zustandslos sein und die notwendigen Daten über die props erhalten. Zustandslose Komponenten werden bevorzugt, da sie einfacher zu lesen und zu testen sind.

Zusammenfassend lässt sich sagen, dass sowohl state als auch props notwendig sind und props ohne den Staat nicht so effektiv wären. Im Allgemeinen ist es besser, zustandsbehaftete Komponenten für die Ereignisbehandlung und Datenverarbeitung zu verwenden, während zustandslose Komponenten besser für die Visualisierung und Formatierung geeignet sind.