Beide enthalten Daten, die beeinflussen, was eine Komponente rendert, unterscheiden sich aber darin, wer die Daten besitzt und ob sie sich ändern können.
Beide enthalten Daten, die beeinflussen, was eine Komponente rendert, unterscheiden sich aber darin, wer die Daten besitzt und ob sie sich ändern können.
// `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 (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Parent decides the step and passes it down:
<Counter step={5} />
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.
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.