React useHover-хук

Введение

В этом практическом занятии мы изучим реализацию пользовательского хука под названием useHover в React. Этот хук будет обрабатывать событие наведения курсора на обёрнутый компонент и обновлять состояние соответственно. В конце этого практического занятия вы будете лучше понимать, как создавать и использовать пользовательские хуки в React, чтобы повысить функциональность своих компонентов.

Skills Graph

React useHover-хук

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Этот код создает пользовательский хук, который обрабатывает наведение курсора на обёрнутый компонент.

Для использования хука:

• Используйте useState(), чтобы создать переменную, которая хранит состояние наведения.
• Используйте useCallback(), чтобы мемоизировать два обработчика функций, которые обновляют состояние.
• Используйте useCallback(), чтобы создать обратный вызов ref и создать или обновить слушатели для событий 'mouseover' и 'mouseout'.
• Используйте useRef(), чтобы отслеживать последний узел, переданный в callbackRef, чтобы был able удалить его слушатели.

const useHover = () => {
  const [isHovering, setIsHovering] = React.useState(false);
  const handleMouseOver = React.useCallback(() => setIsHovering(true), []);
  const handleMouseOut = React.useCallback(() => setIsHovering(false), []);
  const nodeRef = React.useRef();
  const callbackRef = React.useCallback(
    (node) => {
      if (nodeRef.current) {
        nodeRef.current.removeEventListener("mouseover", handleMouseOver);
        nodeRef.current.removeEventListener("mouseout", handleMouseOut);
      }
      nodeRef.current = node;
      if (nodeRef.current) {
        nodeRef.current.addEventListener("mouseover", handleMouseOver);
        nodeRef.current.addEventListener("mouseout", handleMouseOut);
      }
    },
    [handleMouseOver, handleMouseOut]
  );

  return [callbackRef, isHovering];
};

Вот пример использования хука:

const MyApp = () => {
  const [hoverRef, isHovering] = useHover();
  return <div ref={hoverRef}>{isHovering ? "Hovering" : "Not hovering"}</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по React useHover-хуку. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.