Создание (поддельного) пользовательского хука генератора событий

В этой не технической статье мы немного поговорим о поведении состояния в React.js, побочных эффектах и ​​событиях.

Иногда вы не думали, что было бы круто, если бы вы могли генерировать событие, когда в вашем компоненте происходит определенное событие? Например, при сбое выборки данных может возникнуть событие «Сбой», или выборка данных со статусом успеха может вызвать событие «Успех» или даже событие «Бинго», когда определенное число появляется в какой-либо части вашего компонента. Хук генератора поддельных событий позволит вам создавать компоненты с включенными в них пользовательскими событиями.

PS: созданный здесь фиктивный хук события может быть не очень полезным в реальном мире. Это инструмент, созданный для иллюстративных целей (воспринимайте его как доказательство концепции).

Реактивность в React

«У каждого действия есть противодействие»

Реактивные фреймворки и библиотеки, такие как React.js, очень похожи на приведенную ниже цитату: они выполняют «реакции» в соответствии с «действиями», предпринимаемыми пользователем.

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

Таким образом, мы можем обновить экран, изменив некоторое состояние и вызвав повторный рендеринг. Хорошо, но что, если мы хотим сделать что-то еще, когда это состояние изменилось? В этом случае мы можем определить побочный эффект (или просто эффект), используя эффект крючка для этого состояния. Определение побочного эффекта вызовет функцию хука useEffect, когда что-либо в массиве зависимостей изменится. Я немного объясню хук useEffect позже в этой статье, но, опять же, если вы хотите углубиться в этот хук, посмотрите эту ссылку.

Хук генератора пользовательских событий

Возможно, вы пытаетесь понять, почему я сейчас говорю о состоянии и эффектах… Что ж, состояния и эффекты — это все, что нам нужно для создания наших собственных (фальшивых) событий! Прежде чем я покажу вам свой подход, давайте сначала поговорим о домашних событиях.

Все, что вы делаете в браузере, например, щелчок или нажатие клавиши, является событием DOM. Итак, когда что-то происходит в вашем браузере, он, вероятно, вызовет событие, и вы можете установить функцию, которая будет выполняться, когда это произойдет. Мы можем воспроизвести это поведение в любом компоненте React, который нам нужен, изменив состояние, чтобы сгенерировать (поддельное) событие, и установить эффект для запуска функции обратного вызова для обработки этого изменения. Я называю его поддельным событием, потому что это не настоящее событие, как любое событие DOM, но оно может выглядеть так, если мы игнорируем детали реализации. Давайте посмотрим, каким может быть код для этого фальшивого события.

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

Хук эффекта (useEffect) принимает два аргумента: первый — это функция обратного вызова, которая должна быть выполнена, а второй — массив зависимостей, в котором указано, когда будет вызвана функция обратного вызова. Если мы не передадим второй аргумент, функция будет вызываться после каждого повторного рендеринга. Если мы передаем пустой массив, он будет вызван только один раз после монтирования компонента. Любое другое значение, переданное в массиве зависимостей, будет отслеживаться хуком useEffect, и он будет вызывать функцию при каждом изменении любой зависимости. Таким образом, вызов функции eventEmitter изменит fakeEventCount и вызовет функцию внутри useEffect, поскольку fakeEventCount находится в массиве зависимостей.

Обратите внимание, что первый выброс произойдет сразу после монтирования компонента, поэтому у нас есть условие в useEffect, чтобы его пропустить. Кроме того, этот хук вызовет событие, если вы попытаетесь изменить функцию-обработчик. Это нежелательное поведение, поэтому я рекомендую вам исправить это, если вы хотите его использовать. (Вы также должны запомнить свою функцию с помощью useCallback hook).

Давайте теперь посмотрим, как мы создаем компонент с пользовательским (фальшивым) событием:

Как видите, мы просто вызываем хук в компоненте и берем функцию-обработчик реквизита (onBingo) для передачи в качестве аргумента хуку. Мы также вставляем небольшое условное условие, которое должен соблюдать компонент, чтобы запустить событие.

Таким образом, нам просто нужно использовать такой компонент:

Вывод

Если вы хотите/нужно создавать компоненты со встроенными пользовательскими событиями, подход, который мы видели здесь, может быть вам полезен. Тем не менее, вы, возможно, поняли, что хук генератора поддельных событий еще не совсем готов. Мы должны дать ему возможность брать данные при генерации события, чтобы обработчик мог использовать эти данные. Вместо состояния подсчета у нас может быть поддельное состояние данных события с самим подсчетом и свойством для данных, поэтому мы можем использовать данные, вызывающие обработчик. Что-то такое:

const fakeEventEmitter = data => {
  const count = fakeEventData.count + 1
  setFakeEventData({...fakeEventData, count, data})  
}