Оба хранят данные, которые влияют на то, что отображает компонент, но они отличаются кто владеет данными и могут ли они изменяться.
// `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} />
Данные текут вниз (родитель → потомок через props) и изменения текут вверх (потомок просит родителя что-то изменить через callback prop вроде onChange). Этот однонаправленный поток — вот что делает React приложения предсказуемыми.
props.x = 1) это ошибка — React не будет делать re-render и вы нарушили владение родителя. Чтобы "изменить prop", вызовите callback, который родитель вам дал, чтобы родитель обновил свой собственный state и передал новое значение вниз.