В чём разница между state и props?

Question

Accepted Answer

**Props** — это входные данные, **передаваемые в** компонент его родителем (только для чтения с точки зрения дочернего компонента). **State** — это данные, которые компонент **владеет и управляет внутри себя** (может их изменять). Различие: props приходят извне и не изменяются в компоненте; state является внутренним и изменяемым. ## Props — передаваемые, только для чтения ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Props передаются **вниз** от родителя к дочернему компоненту. Дочерний компонент их читает, но не может изменить — чтобы изменить значение prop, родитель должен передать новое значение. ## State — внутренний, изменяемый ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` State создаётся и управляется *внутри* компонента; компонент его изменяет (через `setCount`/`setState`), и изменение его запускает перерисовку. ## Рядом ```text Props State Source passed from parent created in the component Mutable? read-only (in child) yes (via setter) Who controls it the parent the component itself Triggers render when the parent changes it when the component updates it Purpose configure/pass data in track changing internal data ``` ## Они работают вместе ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` State одного компонента часто передаётся дочернему компоненту как **prop**. Поднятие state выше и передача его вниз — это именно этот паттерн — родитель владеет state, дети получают его как props. ## Почему это важно Различие между state и props является фундаментальным для компонентных фреймворков. Оно определяет владение данными и поток данных: props — это внешняя конфигурация только для чтения (данные вниз); state — это внутренние, изменяемые данные, которыми управляет компонент. Путаница между ними — мутирование props или дублирование props в state — приводит к классическим ошибкам. Понимание того, что данные передаются вниз как props, а каждый компонент управляет своим собственным state, — это основа проектирования компонентов в React/Vue/Angular.