Les deux contiennent des données qui affectent ce qu'un composant render, mais ils diffèrent dans qui possède les données et si elles peuvent changer.
Les deux contiennent des données qui affectent ce qu'un composant render, mais ils diffèrent dans qui possède les données et si elles peuvent changer.
// `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} />
Les données circulent vers le bas (parent → enfant via les props) et les changements circulent vers le haut (l'enfant demande au parent de changer quelque chose via une fonction de rappel (callback) comme onChange). Ce flux unidirectionnel est ce qui rend les applications React prévisibles.
props.x = 1) est une erreur — React ne re-render pas et vous avez rompu la propriété du parent. Pour « changer une prop », appelez une fonction de rappel que le parent vous a donnée pour que le parent mette à jour son propre state et passe une nouvelle valeur vers le bas.