Какая разница между props и state?

Question

IT Interview Practice · Accepted Answer

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

Почему это важно

Как решить, что использовать

Похожие вопросы