Skip to main content

Изучаем - React

Добро пожаловать в учебное пособие для изучения React.

📄️ Функции-обработчики

При работе с React, как и в обычном HTML, мы хотим реагировать на действия пользователя: ввод текста, клики по кнопкам, отправку формы и т.д. Для этого используются функции-обработчики событий (event handlers), которые мы передаём через специальные атрибуты JSX — такие как onChange, onClick, onSubmit и другие.

📄️ Управление состоянием компонентов

В React есть два основных способа работы с данными: пропсы и состояние (state). Если пропсы используются для передачи информации вниз по дереву компонентов, то state позволяет сделать приложение интерактивным — изменять внешний вид и поведение компонентов при взаимодействии с пользователем.

📄️ Подъем состояния в React

В React часто возникает необходимость делиться состоянием между несколькими компонентами. Например, когда вы вводите текст в поле поиска (компонент Search), и при этом должны фильтровать список элементов (компонент List) в родительском компоненте (App). В этом случае внутреннего состояния одного компонента уже недостаточно, и вам нужно «поднять состояние» выше по иерархии — в родительский компонент.

📄️ Side effects и хук useEffect

В React-приложениях компоненты должны быть предсказуемыми: при одинаковых входных данных (props и state) они должны возвращать одинаковый результат. Однако в реальных приложениях часто требуется выполнять действия, выходящие за рамки чистого рендеринга — например, запросы к API, работу с localStorage, подписку на события или таймеры. Такие операции называются побочными эффектами (side effects).

📄️ Императивное программирование в React: когда и как использовать

React в первую очередь продвигает декларативную парадигму программирования, где вы описываете, как должен выглядеть пользовательский интерфейс, основываясь на состоянии приложения, а React отвечает за обновление DOM. Это контрастирует с императивным программированием, которое включает в себя явное пошаговое инструктирование компьютера о том, как достичь результата, часто с помощью прямых манипуляций с DOM.