Разница в производительности хуков usKeyPress и useEventListener - PullRequest
Новая
       6

Разница в производительности хуков usKeyPress и useEventListener

0 голосов
/ 14 июля 2020

Хук useEventListener и useKeyPress , похоже, имеют несколько иную реализацию, но я пытаюсь выяснить, какой инструмент лучше использовать для моей спецификации c вариант использования.

У меня есть настраиваемое раскрывающееся меню выбора, и я хочу слушать клавиши со стрелкой вниз, вверх и ввода. Моя проблема, или, скорее, вопрос, относительно ловушки useKeyPress, заключается в том, что происходит два рендеринга + я не совсем уверен, почему существует промежуточное useState.

Например, используя ловушку useKeyPress, если пользователь нажимает стрелку вниз, прослушиватели событий срабатывают дважды, один из них возвращает true и сразу возвращает false onKeyUp: 

  useEffect(() => {
    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);
    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, []);

Кроме того, я не уверен, почему это происходит, 

const [keyPressed, setKeyPressed] = useState(false);

Я просто хочу прояснить разницу между этими двумя и какой из них использовать для моего варианта использования.

Ответы [ 2 ]

0 голосов
/ 14 июля 2020

React работает путем обновления состояния. Если хук useKeyPress не обновил некоторое внутреннее состояние, то он не сможет вернуть ссылку на обновленное значение и вызвать повторную визуализацию компонента. useKeyPress прослушивает событие keyDown, чтобы переключить состояние в истинное состояние, затем слушает событие keyUp, чтобы очистить это состояние (вы не хотите, чтобы оно застряло в истинном состоянии.

useEventListener, безусловно, более тяжелый инструмент; он способен отслеживать многие другие события. Однако он не использует внутреннее состояние, а требует, чтобы обработчики обратного вызова передавались ему для вызова при возникновении зарегистрированного события.

Для облегченной утилиты onKeyPress - это полезно, если вам просто нужно запустить обратный вызов эффекта в компоненте, но для более крупных проектов или когда вы хотите больше, чем знать, что произошло нажатие клавиши, useEventListener может справиться с этим.

0 голосов
/ 14 июля 2020

Производительность не должна быть вашей главной заботой, поскольку оба они достаточно быстры почти для каждого варианта использования, который они охватывают.

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

Кроме того, я не уверен, почему это происходит,

const [keyPressed, setKeyPressed] = useState(false);

Это просто вариант использования. Он отслеживает нажатое состояние кнопки.

useEventListener - это более общий c инструмент, который позволяет вам самостоятельно выполнять обновление и управление состоянием. Он позволяет вам решать, что обновлять, на основе событий, на которые вы подписаны. Фактически вы можете переписать useKeyPress для внутреннего использования useEventListener.

...