Was ist der Unterschied zwischen Props und State in React?

Props (Eigenschaften) und Zustand (State) sind zwei zentrale Mechanismen zur Datenverwaltung in React-Komponenten.

Props:

• Werden vom Eltern- zum Kind-Komponenten übergeben.
• Sind innerhalb des Kind-Komponenten unveränderlich (immutable).
• Ermöglichen die Interaktion zwischen Komponenten.
• Bestimmen das Aussehen oder Verhalten des Komponenten basierend auf Eingabedaten.

Zustand:

• Gehört zu einer bestimmten Komponente und wird von ihr verwaltet.
• Ist innerhalb der Komponente veränderbar (mutable).
• Repräsentiert Daten, die sich im Laufe der Zeit ändern können und das Rendering beeinflussen.
• Eine Änderung des Zustands löst eine Neudarstellung (Re-Render) des Komponenten und seiner Nachkommen aus.

Die wichtigsten Unterschiede können in einer Tabelle dargestellt werden:

Merkmal	Props	Zustand
Quelle	Elternkomponente	Die Komponente selbst
Änderbarkeit	Unveränderlich (immutable)	Änderbar (mutable)
Verwaltung	Wird von außen übergeben	Wird innerhalb der Komponente verwaltet
Zweck	Anzeige externer Daten, Konfiguration	Verwaltung des internen Zustands
Änderung führt zu	Neudarstellung bei Änderung im Elternteil	Neudarstellung bei Änderung in der Komponente

Beispiel für die Verwendung von Props:

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Hallo vom Elternteil!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Prop "text" wird übergeben */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Verwendung der Prop "text" */}
  );
}

export default ChildComponent;

Beispiel für die Verwendung von Zustand:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Initialisierung des Zustands "count"

  const increment = () => {
    setCount(count + 1); // Änderung des Zustands
  };

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={increment}>Erhöhen</button>
    </div>
  );
}

export default Counter;