67 lines
5.4 KiB
Markdown
67 lines
5.4 KiB
Markdown
---
|
||
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-функцию, переданную через пропсы, которая изменит состояние родительского
|
||
компонента.
|
||
|
||
🚀 **_Источник: DeepSeek_** |