Неправильное поведение перехватывает React с прослушивателем событий

Встроенная обработка событий

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

В последнем случае прослушиватель событий может быть дополнительно запомнен с помощью useMemo или useCallback чтобы предотвратить ненужные повторные рендеринг, когда он передается как проп:

 const eventListener = useCallback(() ={amp}gt; { console.log(state); }, [state]); 

В предыдущей редакции ответа предлагалось использовать изменяемое состояние, которое применимо к начальной реализации ловушки useState в версии React 16.7.0-alpha, но не работоспособно в окончательной реализации React 16.8. useState настоящее время useState поддерживает только неизменное состояние.

Ручная перерегистрация слушателя событий

Другое решение состоит в том, чтобы каждый раз перерегистрировать прослушиватель событий, поэтому обратный вызов всегда получает свежее состояние из охватывающей области:

 function eventListener() { console.log(state); } useEffect(() ={amp}gt; { // register eventListener on each state update }, [state]); 

Изменчивое состояние

Общий подход, который решает эту проблему, состоит в том, чтобы использовать useRef вместо useState . Ссылка — это в основном рецепт, который предоставляет изменяемый объект, который может быть передан по ссылке:

 const ref = useRef(0); function eventListener() { ref.current  ; } 

В случае, если компонент должен быть повторно визуализирован при обновлении состояния, как это ожидается от useState , ссылки не применяются.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector