Was sind state und props im Kontext der React-Entwicklung?

State — ist der interne Zustand der Komponente, ein Datensatz, der sich im Laufe der Komponentenausführung ändern kann. Änderungen am State führen zu einer Neudarstellung der Komponente.

Props — sind externe Parameter, die von außerhalb an die Komponente übergeben werden, vom Elternteil. Props sind innerhalb der empfangenden Komponente unveränderlich. Sie werden für Konfiguration und Datenübertragung vom Eltern- zum Kindkomponente verwendet.

Hauptunterschiede:

Merkmal	State	Props
Quelle	Innerhalb der Komponente	Von außen übergeben
Änderbarkeit	Kann sich ändern	Innerhalb nicht änderbar
Ziel	Steuerung des internen Anblicks	Daten und Konfiguration übertragen

Beispiel für die Verwendung von State:

import React, { useState } from 'react';

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

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

Beispiel für die Verwendung von Props:

import React from 'react';

function Greeting(props) {
  return <h1>Hallo, {props.name}!</h1>; // Verwendung von Props
}

function App() {
  return <Greeting name="Welt" />; // Übergabe von Props
}