Эта статья является продолжением предыдущей Введение в React Hooks (Javascript) — Часть 1. Если вы еще не читали, пожалуйста:). В этой статье я расскажу:
useReduceruseLayoutEffect
Использование: useReducer
Хук useReducer позволяет вам использовать редукторы для управления состоянием в вашем приложении React.
Что такое редуктор?
Редьюсер — это функция, которая позволяет предоставить текущее состояние компонента и вернуть следующее, обновленное состояние. Он имеет два параметра: состояние и действие. У действия всегда есть свойство .type, представляющее собой строку, и необязательное свойство .payload для предоставления внешнего значения. Для запуска редюсеров существует функция dispatch, в которой вы вводите тип действия (и полезную нагрузку).
Это общий синтаксис:
Если вы являетесь пользователем TypeScript, редукторы — это то, что вам нужно в вашем приложении React из-за отличного понимания типов. Использование машинописного текста:
В отдельной статье я покажу вам все советы и приемы, которые вы можете использовать для создания и использования редюсеров в ваших приложениях (React или не-React).
Вернуться к реакции
Вот как вы будете использовать его в приложении. Типы действий значительно упрощают определение выполняемого действия, что делает их очень полезными при управлении сложными состояниями.
Это так просто!
Использование: useLayoutEffect
Во-первых: это почти не используется. Полезно только для измерения свойств элементов страницы. Хук работает синхронно, в отличие от useEffect , который может повлиять на отрисовку страницы. Использование точно такое же, как useEffect. (Обратитесь к предыдущей статье, чтобы узнать, как его использовать)
Вывод
Вот и все на сегодня! Оставайтесь с нами в части 3, где я расскажу о контексте React и обработчике useContext, а также о том, как создать свой собственный обработчик. Спасибо за чтение!
