Was ist der Unterschied zwischen props und state?

Question

Accepted Answer

Beide enthalten Daten, die beeinflussen, was eine Komponente rendert, unterscheiden sich aber darin, **wer die Daten besitzt** und **ob sie sich ändern können**. - **props** werden *in* eine Komponente von ihrer übergeordneten Komponente übergeben. Sie sind **schreibgeschützt** — die Komponente darf sie niemals ändern. - **state** wird *innerhalb* der Komponente besessen und verwaltet. Es kann sich über die Zeit ändern, und eine Änderung löst ein **re-render** aus. ## Beispiel ```jsx // `step` is a PROP — given by the parent, the child only reads it. // `count` is STATE — owned here, changes on click, causes a re-render. function Counter({ step }) { const [count, setCount] = useState(0); return ( ); } // Parent decides the step and passes it down: ``` Daten fließen **nach unten** (Eltern → Kind über props) und Änderungen fließen **nach oben** (Kind bittet das Elternteil, etwas über eine callback prop wie `onChange` zu ändern). Dieser unidirektionale Fluss macht React-Apps vorhersehbar. ## Warum es wichtig ist - Kommt von oben und die Komponente sollte es nicht ändern → **prop**. - Die Komponente muss es über die Zeit ändern → **state**. - Props zu mutieren (`props.x = 1`) ist ein Fehler — React wird nicht re-rendern und du hast das Eigentum des Elternteils gebrochen. Um ein prop zu "ändern", rufe einen callback auf, den dir das Elternteil gegeben hat, damit das Elternteil seinen eigenen state aktualisiert und einen neuen Wert nach unten übergibt.