state) компонента в React? [#q-14bee738d69b8182bee1ee953d941cf7]
Состояние хранит данные компонента между рендерами. В классовом компоненте state является объектом; значение состояния, созданного useState, может иметь любой тип.
В классовом компоненте состояние задают в constructor или поле state и обновляют через setState. В функциональном используют useState или useReducer. Обновление ставится в очередь; новое значение доступно следующему рендеру.
Пример:
```jsx
import React, { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0, // Начальное состояние
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
Счетчик: {this.state.count}
Counter имеет состояние count, которое обновляется при клике на кнопку. При вызове setState(), React обновит состояние и перерендерит компонент, отображая новое значение count.
:::note[Ссылки для изучения]
1. [useState: состояние и обновление следующего рендера](https://reactdev.ru/reference/react/useState/)
1. [Классовое состояние и setState](https://reactdev.ru/reference/react/Component/)
1. [Состояние компонента и useState. Ulbi TV, с 19:42](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=1182s)
:::
---
## Как обновить состояние компонента? [#q-14bee738d69b81b998d9de59a807a2e4]
В классовом компоненте setState принимает объект обновлений или функцию от предыдущего состояния и поверхностно объединяет результат со state. В функциональном компоненте setter из useState принимает следующее значение или функцию от предыдущего значения и заменяет его целиком. Состояние нельзя изменять напрямую.
Пример использования setState():
```jsx
import React, { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
// Обновление состояния с использованием объекта
this.setState({ count: this.state.count + 1 });
};
decrement = () => {
// Обновление состояния с использованием функции
this.setState((prevState) => {
return { count: prevState.count - 1 };
});
};
render() {
return (
Счетчик: {this.state.count}
increment() и decrement() обновляют состояние count с помощью setState(). Важно использовать функции при обновлении состояния, особенно если новое состояние зависит от предыдущего состояния, чтобы избежать проблем с асинхронностью.
:::note[Ссылки для изучения]
1. [useState: состояние и обновление следующего рендера](https://reactdev.ru/reference/react/useState/)
1. [Классовое состояние и setState](https://reactdev.ru/reference/react/Component/)
1. [Обновление состояния через setter useState. Ulbi TV, с 21:36](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=1296s)
:::
---
## Что такое пропсы (props) в React? [#q-14bee738d69b815ca900f7e3397dbb57]
"Пропсы" (props) в React - это механизм передачи данных от родительского компонента к дочернему. Они представляют собой атрибуты, которые задаются при создании компонента и не могут быть изменены самим компонентом, который их получает. Пропсы используются для передачи информации о состоянии или конфигурации компонента.
Пример использования пропсов:
```jsx
import React from "react";
function Welcome(props) {
return Welcome принимает пропс name и использует его для вывода персонализированного приветствия. Компонент App передает значение "Алиса" в пропс name компонента Welcome.
Пропсы передаются в виде объекта и доступны как свойства (props) внутри дочернего компонента.
Использование пропсов позволяет создавать более гибкие и переиспользуемые компоненты, так как можно настраивать их поведение и отображение извне.
:::note[Ссылки для изучения]
1. [Передача props компоненту React](https://reactdev.ru/learn/passing-props-to-a-component/)
2. [Props как входные данные компонента. Ulbi TV, с 35:03](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=2103s)
:::
---
## В чем разница между состоянием и пропсами? [#q-14bee738d69b81308326c01298272a4d]
Состояние (state) и пропсы (props) - это два основных концепта в React, используемые для управления данными в компонентах. Они имеют разные цели и характеристики:
Состояние (
state
):
1. Состояние - это внутренние данные компонента, которые могут изменяться во время выполнения.
1. Определяется и управляется самим компонентом, в котором оно находится.
1. Изменение состояния вызывает перерендеринг компонента, чтобы отобразить новое состояние.
1. Доступно только для компонента, в котором было определено состояние.
1. Обновляется через setState в классе, setter из useState или dispatch из useReducer в функциональном компоненте.
Пропсы (
props
):
1. Пропсы - это данные, передаваемые от родительского компонента к дочернему компоненту.
1. Нельзя изменить пропсы внутри дочернего компонента. Они считаются "только для чтения".
1. Пропсы служат для настройки и передачи данных в компоненты.
1. Используются для связи между различными компонентами и передачи информации вниз по иерархии.
1. При рендере родителя дочерний компонент обычно рендерится с новыми пропсами. memo может пропустить рендер, если пропсы не изменились.
Вкратце, состояние предназначено для хранения и управления изменяющимися данными внутри компонента, тогда как пропсы предназначены для передачи данных от родительского компонента к дочернему. Оба этих концепта помогают создавать динамичные и переиспользуемые интерфейсы в React приложениях.
:::note[Ссылки для изучения]
1. [useState: локальное изменяемое состояние](https://reactdev.ru/reference/react/useState/)
1. [Props: входные данные от родителя](https://reactdev.ru/learn/passing-props-to-a-component/)
:::
---
## Как обновить состояние компонента после изменения props? [#q-14bee738d69b817092aac51b5748f2d4]
В React существует несколько способов обновления состояния компонента после изменения его props. Это может потребоваться, когда компонент зависит от входящих props и должен реагировать на их изменения. Вот несколько подходов:
1. componentDidUpdate(prevProps)
: Метод componentDidUpdate()
вызывается после обновления компонента. Вы можете сравнить предыдущие и
текущие props с помощью параметра prevProps и
this.props, и при необходимости обновить состояние:
```javascript
componentDidUpdate(prevProps) {
if (this.props.someProp !== prevProps.someProp) {
this.setState({ someState: newValue });
}
}
```
1. getDerivedStateFromProps(nextProps, prevState)
: Этот статический метод вызывается перед рендерингом и
каждый раз, когда происходит обновление props. Вы можете вернуть новое
состояние на основе новых props:
```javascript
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.someProp !== prevState.prevPropValue) {
return { someState: newValue };
}
return null;
}
```
1. useState с useEffect
: Если вы используете функциональные компоненты, вы
можете использовать useState для хранения состояния и
useEffect для реагирования на изменения props:
```javascript
import React, { useState, useEffect } from "react";
function MyComponent(props) {
const [state, setState] = useState(initialState);
useEffect(() => {
if (props.someProp !== state.someState) {
setState({ someState: newValue });
}
}, [props.someProp]);
//...
}
```
Не копируйте props в state без необходимости: вычисляйте производные значения во время рендера. Для полного сброса состояния можно изменить key компонента. getDerivedStateFromProps нужен лишь в редких случаях; Effect предназначен прежде всего для синхронизации с внешними системами. Примеры выше схематичны: initialState и newValue должны быть определены, а отслеживаемое предыдущее значение пропса нужно обновлять вместе с состоянием.
:::note[Ссылки для изучения]
1. [Изменение props: сброс и корректировка состояния без лишнего эффекта](https://reactdev.ru/learn/you-might-not-need-an-effect/)
:::
---
## Как передать данные между компонентами вверх и вниз по иерархии? [#q-14bee738d69b813b9f22f8fb028b93ea]
В React данные могут передаваться между компонентами вверх и вниз по иерархии с использованием пропсов (props) и колбэков (callback функций). Вот как это работает:
Передача данных вниз по иерархии (от родителя к дочернему компоненту):
1. Пропсы (props): Родительский компонент передает данные
своему дочернему компоненту через пропсы. Дочерний компонент может получить
доступ к этим данным как свойства (props).
Пример:
```jsx
// Родительский компонент
import React from "react";
import ChildComponent from "./ChildComponent";
const ParentComponent = () => {
const data = "Данные для дочернего компонента";
return {props.dataProp}
; }; export default ChildComponent; ``` Передача данных вверх по иерархии (от дочернего компонента к родителю): 1. Колбэки (callback функции): Родительский компонент передает функцию в качестве пропса дочернему компоненту. Дочерний компонент может вызвать эту функцию, передавая ей данные обратно вверх по иерархии. Пример: ```jsx // Родительский компонент import React, { useState } from "react"; import ChildComponent from "./ChildComponent"; const ParentComponent = () => { const [receivedData, setReceivedData] = useState(""); const handleDataChange = (data) => { setReceivedData(data); }; return (Полученные данные: {receivedData}
lifting state up)? [#q-14bee738d69b81d58757d41b7c3179d4]
"Подъем состояния" (lifting state up) - это паттерн в React, который предполагает перемещение состояния из дочерних компонентов в родительские компоненты, чтобы разделять и управлять состоянием на более высоком уровне и передавать его через пропсы.
Этот подход особенно полезен, когда несколько компонентов должны иметь доступ к одному и тому же состоянию или когда состояние должно быть синхронизировано между разными частями приложения.
Пример с подъемом состояния:
```jsx
import React, { useState } from "react";
const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
return (
);
};
const Calculator = () => {
const [celsius, setCelsius] = useState("");
const [fahrenheit, setFahrenheit] = useState("");
const handleCelsiusChange = (value) => {
setCelsius(value);
setFahrenheit((value * 9) / 5 + 32);
};
const handleFahrenheitChange = (value) => {
setFahrenheit(value);
setCelsius(((value - 32) * 5) / 9);
};
return (
Calculator поднимает состояние температур из TemperatureInput компонентов. При изменении температуры в одном из вводов, состояние поднимается в родительский компонент Calculator, который затем обновляет состояние для другого ввода, обеспечивая синхронизацию температур в обеих шкалах.
:::note[Ссылки для изучения]
1. [Поднятие состояния и обмен через props и callbacks](https://reactdev.ru/learn/sharing-state-between-components/)
2. [Передача данных между компонентами. Ulbi TV, с 59:15](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=3555s)
:::
---
## Что такое "нормализация состояния" (state normalization) в контексте управления состоянием приложения? [#q-14bee738d69b817daf8ad5e1a1dceb1d]
Нормализация состояния (state normalization) - это паттерн управления состоянием, который используется для организации данных в хранилище таким образом, чтобы обеспечить эффективное хранение, обновление и доступ к данным в Redux или других системах управления состоянием.
Основная идея нормализации состоит в том, чтобы хранить данные в нормализованной форме, где каждый тип данных хранится в отдельной коллекции (таблице), и используются ссылки между различными коллекциями для устранения дублирования данных и облегчения обновления.
Пример: Предположим, у нас есть список постов и список комментариев к этим постам. Вместо хранения комментариев внутри каждого поста (что может привести к дублированию данных), мы можем создать две коллекции: "посты" и "комментарии", и использовать идентификаторы постов в комментариях для установления связи между ними.
Преимущества нормализации состояния:
1. Экономия места: Дублирование данных уменьшается, так как
одни и те же данные не хранятся в нескольких местах.
1. Легкость обновления: Изменение данных в одной коллекции
автоматически отражается в других, где эти данные используются.
1. Быстрый доступ: Поиск, фильтрация и доступ к данным
ускоряются, так как данные разделены на более мелкие коллекции.
1. Прозрачность: Структура хранилища становится более легко
понимаемой и отслеживаемой.
В то время как нормализация может помочь в оптимизации и управлении состоянием, она также добавляет сложности в логику обновления данных и может потребовать дополнительной работы при выборе данных для отображения в компонентах. Вам стоит выбрать подход в зависимости от размера и сложности вашего приложения.
:::note[Ссылки для изучения]
1. [Плоское состояние: объекты по ID вместо глубокой вложенности](https://reactdev.ru/learn/choosing-the-state-structure/)
:::
---
## Как управлять состоянием между компонентами, не имеющими близкой связи? [#q-14bee738d69b8109b574e2d0b492506f]
Существует несколько методов для управления состоянием между компонентами, которые не имеют прямой связи. Вот некоторые из них:
1. Поднятие состояния (
Lifting State Up
): Вы можете поднять состояние до ближайшего общего
родительского компонента, который имеет доступ и к одному, и к другому
компоненту. Затем передавайте это состояние как пропсы в каждый компонент.
Этот подход особенно полезен, когда компоненты имеют общий родительский
компонент, но не имеют прямой связи друг с другом.
1. Контекст (
Context API
): Используйте Context API, который позволяет передавать
данные глубоко в дерево компонентов без явной передачи пропсов через все
уровни. Создайте контекст и оберните ваше дерево компонентов этим контекстом.
Таким образом, компоненты смогут получать доступ к данным из контекста, даже
если они не находятся в прямой иерархии.
1. Глобальное состояние (
Global State
): Используйте библиотеки управления состоянием, такие
как Redux или MobX, чтобы создать глобальное хранилище данных, доступное для
всех компонентов. Это особенно полезно, если состояние нужно между
компонентами, которые находятся далеко друг от друга в дереве компонентов.
1. Событийная система: Реализуйте свою событийную систему,
которая позволит компонентам подписываться на определенные события и
передавать данные. Это можно сделать с помощью сторонних библиотек или
самостоятельно.
1. RESTful API: Если ваши компоненты общаются с сервером,
вы можете использовать RESTful API для обмена данными между ними. Компоненты
могут получать и отправлять данные через API.
1. Библиотеки для управления состоянием: В зависимости от
вашего опыта и требований, вы также можете рассмотреть использование
библиотек управления состоянием, таких как Recoil, Zustand и других.
Выбор метода будет зависеть от конкретных требований вашего приложения, его архитектуры и сложности взаимодействия между компонентами.
:::note[Ссылки для изучения]
1. [Context: данные для компонентов глубоко в дереве](https://reactdev.ru/learn/passing-data-deeply-with-context/)
:::
---
## Какие популярные библиотеки для управления состоянием вы знаете, помимо встроенного useState? [#q-14bee738d69b8141a19bcb62066ead20]
Популярные библиотеки для управления состоянием в React:
{/* prettier-ignore */}
1. Redux:
- Централизованное хранилище состояния с предсказуемым поведением.
- Пример использования:
```javascript
import { createStore } from 'redux';
import { Provider } from 'react-redux';
```
1. MobX:
- Реактивное управление состоянием с фокусом на наблюдаемых данных и реакциях.
- Пример использования:
```javascript
import { observable } from 'mobx';
import { observer } from 'mobx-react';
```
1. Recoil:
- Recoil использует атомы и селекторы, но его репозиторий архивирован в январе 2025 года. Это исторический пример, а не рекомендация для нового проекта.
- Пример использования:
```javascript
import { RecoilRoot, atom, useRecoilState } from 'recoil';
```
1. Zustand:
- Легковесная и гибкая библиотека для управления состоянием.
- Пример использования:
```javascript
import { create } from 'zustand';
```
1. Context API:
- Встроенный механизм для управления глобальным состоянием с помощью контекста.
- Пример использования:
```javascript
import { createContext, useContext } from 'react';
```
Помимо встроенного useState, для управления состоянием в React популярны библиотеки Redux, MobX, Recoil, Zustand, а также встроенный Context API.
:::note[Ссылки для изучения]
1. [Zustand: хранилище состояния и подключение React-компонентов](https://reactdev.ru/libs/zustand/getting-started/introduction/)
:::
---
## Какие паттерны использования Redux вы знаете? [#q-14bee738d69b81ad83b2ea21d27219b5]
Паттерны использования Redux:
{/* prettier-ignore */}
1. Действия (Actions):
- Описывают изменения состояния через типы и полезную нагрузку.
- Пример:
```javascript
const increment = () => ({ type: 'INCREMENT' });
```
1. Редьюсеры (Reducers):
- Функции, которые описывают, как состояние изменяется в ответ на действия.
- Пример:
```javascript
const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
};
```
1. Хранилище (Store):
- Хранит состояние приложения и предоставляет методы для доступа к состоянию и отправки действий.
- Пример:
```javascript
import { createStore } from 'redux';
const store = createStore(counter);
```
1. Контейнерные компоненты (Container Components):
- Соединяют компоненты React с Redux-хранилищем с помощью connect.
- Пример:
```javascript
import { connect } from 'react-redux';
const mapStateToProps = (state) => ({ count: state });
const mapDispatchToProps = { increment };
export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);
```
1. Thunk Middleware:
- Позволяет писать действия, которые возвращают функции вместо объектов, для работы с асинхронными операциями.
- Пример:
```javascript
import { thunk } from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';
const store = createStore(rootReducer, applyMiddleware(thunk));
```
1. Селекторы (Selectors):
- Функции для выборки данных из состояния, повышают читаемость и повторное использование кода.
- Пример:
```javascript
const getCount = (state) => state.counter;
```
Популярные паттерны использования Redux включают действия, редьюсеры, хранилище, контейнерные компоненты, thunk middleware и селекторы. Эти паттерны помогают структурировать и управлять состоянием приложения эффективно.
:::note[Ссылки для изучения]
1. [Redux: однонаправленный поток actions, reducers и store](https://reactdev.ru/libs/redux/basics/DataFlow/)
:::
---
## Какие альтернативы Redux для управления состоянием в React-приложениях? [#q-14bee738d69b81a0be51c85c58df6c04]
Альтернативы Redux для управления состоянием в React-приложениях:
{/* prettier-ignore */}
1. MobX:
- Реактивное управление состоянием с акцентом на наблюдаемые данные и автоматические реакции.
- Пример:
```javascript
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
```
1. Recoil:
- Recoil использует атомы и селекторы, но его репозиторий архивирован в январе 2025 года. Это исторический пример, а не рекомендация для нового проекта.
- Пример:
```javascript
import { RecoilRoot, atom, useRecoilState } from 'recoil';
```
1. Zustand:
- Легковесная и гибкая библиотека для управления состоянием.
- Пример:
```javascript
import { create } from 'zustand';
const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 }))
}));
```
1. Context API:
- Встроенный механизм для управления глобальным состоянием с помощью контекста.
- Пример:
```jsx
import { createContext, useContext, useState } from 'react';
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [state, setState] = useState(0);
return XState:
- Управление состоянием с использованием конечных автоматов и диаграмм состояний.
- Схематичный пример старого API XState 4. В XState 5 используют createMachine или setup; useMachine вызывают внутри компонента или пользовательского хука:
```javascript
import { Machine } from 'xstate';
import { useMachine } from '@xstate/react';
const toggleMachine = Machine({ /* состояние машины */ });
const [state, send] = useMachine(toggleMachine);
```
1. React Query:
- Специализируется на управлении состоянием данных, извлекаемых из серверов.
- Пример для React Query 3; useQuery вызывается внутри компонента или пользовательского хука. В TanStack Query 5 используется объект параметров:
```javascript
import { useQuery } from 'react-query';
const { data, error, isLoading } = useQuery('data', fetchData);
```
Альтернативы Redux для управления состоянием в React-приложениях включают MobX, Recoil, Zustand, Context API, XState и React Query. Эти библиотеки и инструменты предлагают разные подходы и функциональные возможности для управления состоянием.
:::note[Ссылки для изучения]
1. [Zustand: хранилище состояния и подключение React-компонентов](https://reactdev.ru/libs/zustand/getting-started/introduction/)
:::
---
## Когда useReducer лучше useState? [#q-transfer-0449]
`useReducer` удобнее, когда состояние меняется через несколько связанных переходов, следующие значения зависят от предыдущих, а правила обновления разбросались по обработчикам. Reducer принимает state и action и возвращает новое состояние, поэтому переходы можно читать и тестировать как чистую функцию. Это полезно для сложной формы, wizard или state machine. Для одного независимого boolean или строки `useState` проще. Reducer не делает состояние глобальным и не уменьшает render автоматически; его ценность состоит в явной модели переходов. Побочные эффекты выполняют вне reducer.
:::note[Ссылки для изучения]
1. [Когда выделять логику состояния в useReducer](https://reactdev.ru/learn/extracting-state-logic-into-a-reducer/)
:::
---
## По каким признакам приложению нужен внешний стейт-менеджер? [#q-transfer-0450]
Внешний state manager оправдан, если одно клиентское состояние читают и изменяют далёкие части дерева, нужны сложные переходы, middleware, time-travel или единая диагностика. До выбора отделяют server state: запросы, кеш, дедупликацию и инвалидирование лучше часто решает специализированная библиотека. Локальные поля формы, hover и открытие модалки оставляют рядом с компонентом. Context подходит редко меняющимся зависимостям, но частые широкие обновления требуют аккуратного разделения. Решение принимают по владельцу данных, частоте обновлений и реальным проблемам отладки. Дополнительная инфраструктура должна окупать сериализацию, boilerplate и обучение команды.
:::note[Ссылки для изучения]
1. [Как разделить фронтенд на модули: раздел «Где хранить состояние приложения?»](https://habr.com/ru/companies/rwb/articles/1079970/)
:::
---
## Что такое контекст (context) в React и для чего он используется? [#q-14bee738d69b8164a383e043874dd796]
Контекст (
Context
) — это механизм, который позволяет передавать данные через
дерево компонентов без необходимости передавать пропсы на каждом уровне.
#### Основные характеристики:
{/* prettier-ignore */}
1. Обмен данными между компонентами:
- Используется для обмена данными между компонентами, которые находятся на разных уровнях вложенности.
1. Создание и использование контекста:
- Создается с помощью React.createContext.
- Обеспечивает доступ к данным через компоненты Provider и Consumer.
#### Пример:
```jsx
import React, { createContext, useContext } from "react";
const MyContext = createContext();
const MyProvider = ({ children }) => {
const value = "Hello, World!";
return context) для передачи данных? [#q-14bee738d69b81069d3def5a4a244346]
Контекст (
Context
) — это механизм, который позволяет передавать данные через
дерево компонентов без необходимости передавать пропсы на каждом уровне.
#### Основные шаги:
{/* prettier-ignore */}
1. Создание контекста:
- Создайте контекст с помощью React.createContext.
```javascript
const MyContext = React.createContext();
```
1. Обертка компонентов в Provider:
- Используйте компонент Provider для обертки тех компонентов, которые должны иметь доступ к контексту. Укажите значение, которое должно быть передано через контекст.
```jsx
Consumer или хук useContext.
```javascript
// Использование хука useContext
const value = useContext(MyContext);
```
#### Пример:
```jsx
import React, { createContext, useContext } from "react";
// Создание контекста
const MyContext = createContext();
// Компонент Provider
const MyProvider = ({ children }) => {
const value = "Hello, World!";
return Provider и Consumer, а также хука useContext, упрощая обмен данными между компонентами на разных уровнях вложенности.
:::note[Ссылки для изучения]
1. [Context: создание, провайдер и чтение через useContext](https://reactdev.ru/learn/passing-data-deeply-with-context/)
2. [Context и useContext для общих данных. Ulbi TV, с 2:38:30](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=9510s)
:::
---
## Что такое "передача данных через контекст" (context passing) в React? [#q-14bee738d69b81c790a8e10936de08ef]
Передача данных через контекст — это механизм, который
позволяет передавать данные напрямую через дерево компонентов без необходимости
передавать пропсы на каждом уровне.
#### Основные шаги:
{/* prettier-ignore */}
1. Создание контекста:
- Создайте контекст с помощью React.createContext.
```javascript
const MyContext = React.createContext();
```
1. Использование Provider:
- Оберните дерево компонентов в MyContext.Provider и передайте значение контекста.
```jsx
MyContext.Consumer или хук useContext.
```javascript
const value = useContext(MyContext);
```
#### Пример:
```jsx
import React, { createContext, useContext } from "react";
// Создание контекста
const MyContext = createContext();
// Компонент Provider
const MyProvider = ({ children }) => {
const value = "Hello, World!";
return