Идемпотентность — свойство функции, которая при любом количестве вызовов, при передаче одних и тех же аргументов всегда возвращает один и тот же результат.
События мыши. Возникают при взаимодействии пользователя с мышью на странице. Например:
• click — при щелчке на элементе кнопкой мыши;
• mousedown — при нажатии кнопки мыши на элементе;
• mouseup — при отпускании кнопки мыши на элементе;
• mousemove — при движении указателя мыши над элементом (листинг 2.25);
• mouseover — при наведении указателя мыши на элемент;
• mouseout — при выходе указателя мыши за пределы элемента.
События клавиатуры. Возникают при взаимодействии пользователя с клавиатурой на странице. Например:
• keydown — при нажатии клавиши на клавиатуре;
• keyup — при отпускании клавиши.
События форм. Возникают при взаимодействии пользователя с элементами форм на странице, такими как текстовые поля, кнопки отправки и др. Например:
• focus — когда элемент формы получает фокус ввода, то есть становится активным и готовым для ввода данных;
• blur — когда элемент теряет фокус ввода, то есть перестает быть активным для ввода данных;
• submit — при отправке формы;
• reset — при сбросе формы.
События документа. Происходят, когда изменяется состояние документа, такое как загрузка, завершение загрузки или изменение размера окна браузера. Например:
• load — когда документ загружен;
• resize — когда изменяется размер окна браузера (листинг 2.28, рис. 2.46).
Листинг 2.28. Назначение события resize объекту браузера window
HOC (произносится «хок»), или High Order Component, переводится как «компонент высшего порядка». Представляет собой функцию, которая принимает на вход какой-либо компонент и возвращает другой, обогащенный или дополнительным состоянием, или свойствами.
пропс передается транзитом из родительского компонента через первый дочерний уровень на второй. Это называется prop drilling.
Как написать кастомный хук
Существует два способа написания.
Первый способ — перенести код, который был написан в компоненте, в отдельную функцию. При этом придется внести некоторые изменения в то, что касается передачи параметров и возвращаемых значений.
Второй способ — написать хук с нуля. Для этого нужно выполнить следующие шаги.
1. Определить результат хука.
2. Определить API, подходящий для результата, данные и структуры, хранящие эти данные, или UI, которые будут задействованы для реализации хука.
3. Задать имя, начинающееся с use и использующее имя задействованных API, данных, структур или UI, UI-эффектов.
4. Определить возвращаемые значения и/или функции. Хук также может ничего не возвращать.
5. Определить параметры хука, которые будут использованы в вычислениях в его теле.
6. Написать реализацию хука.
Шаг 6 требует пояснения. При реализации кастомного хука следует использовать имеющиеся в React хуки, или написанные ранее вами же кастомные хуки, либо хуки из других библиотек, предназначенных для работы с React.
• Имя кастомного хука должно начинаться с use.
• Хук должен вызываться на верхнем уровне компонента.
• Кастомный хук должен содержать внутри себя вызов хотя бы одного хука из имеющихся в React или из других библиотек, предназначенных для React.
• Если кастомный хук возвращает функцию, то ее необходимо мемоизировать с помощью хука useCallback.
• Если хук подразумевает параметры, то они должны стать зависимостью в используемых в хуках React в теле кастомного хука.
Хук нельзя вызывать:
• в условии (if, case), цикле (for, while) или методах обработки списков (forEach, map);
• после выражения с условным рендерингом. Например, когда есть условие if, за которым следует инструкция return, содержащая вывод;
• в обработчиках события. Это частный случай первого пункта текущего списка;
• внутри функций, переданных в хуки useCallback, useMemo и useEffect;
• внутри блока try/catch/finally.