update browser

docs/react/04-props-state.md

@@ -2,4 +2,64 @@
 sidebar_position: 4
 ---
 
-# Состояние и пропсы компонентов
+# Состояние и пропсы компонентов
+
+В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют
+компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои
+особенности.
+
+- **Props** — это данные, которые передаются в компонент извне. Они неизменяемы.
+- **State** — это внутренние данные компонента, которые могут изменяться. Состояние делает компонент динамичным и
+  реактивным.
+
+## Props (Properties)
+
+Пропсы — это входные данные, которые передаются в компонент извне (обычно от родительского компонента). Они
+неизменяемы (immutable), то есть компонент не может изменять свои пропсы, а только читать их.
+
+**Основные особенности:**
+
+1. **Передача данных сверху вниз:** Пропсы передаются от родительского компонента к дочернему.
+2. **Неизменяемость:** Компонент не может изменять свои пропсы. Они доступны только для чтения.
+3. **Использование:** Пропсы используются для передачи данных, конфигурации или callback-функций в компонент.
+
+## State (Состояние)
+
+Состояние — это внутренние данные компонента, которые могут изменяться со временем. Состояние управляется самим
+компонентом и используется для хранения информации, которая может изменяться в результате пользовательских действий,
+сетевых запросов или других событий.
+
+**Основные особенности:**
+
+1. **Локальность:** Состояние принадлежит конкретному компоненту и не может быть доступно извне (если не передано через
+   пропсы).
+2. **Изменяемость:** Состояние можно изменять с помощью метода `setState` (в классовых компонентах) или функции
+   обновления
+   состояния (в функциональных компонентах с использованием хука `useState`).
+3. **Реактивность:** При изменении состояния React автоматически перерисовывает компонент.
+
+## Различия между State и Props
+
+| Характеристика  | Props                                     | State                                         |
+|-----------------|-------------------------------------------|-----------------------------------------------|
+| Источник данных | Передаются извне (родительский компонент) | Управляются внутри компонента                 |
+| Изменяемость    | Неизменяемы (read-only)	                  | Изменяемы (через `setState` или `useState`)   |
+| Использование   | Для передачи данных и callback-функций    | Для хранения данных, которые могут изменяться |
+| Доступность     | Доступны в дочерних компонентах	          | Локальны для компонента                       |
+
+## Когда использовать Props, а когда State?
+
+- Props:
+    - Когда данные передаются от родительского компонента к дочернему.
+    - Когда данные не должны изменяться внутри компонента.
+    - Для передачи callback-функций, которые могут изменять состояние родительского компонента.
+
+- State:
+    - Когда данные должны изменяться внутри компонента (например, в ответ на действия пользователя).
+    - Для хранения временных данных, таких как ввод пользователя, состояние загрузки и т.д.
+
+## Взаимодействие State и Props
+
+Часто состояние родительского компонента передается в дочерний компонент через пропсы. Если дочерний компонент должен
+изменить эти данные, он может вызвать callback-функцию, переданную через пропсы, которая изменит состояние родительского
+компонента.