BFE.devAI解答 - React 代码题
6. useHover()

题目描述： 在React中创建一个自定义hook useHover()，它返回一个包含两个元素的数组 [ref, isHovered]。其中ref为传递给需要监视hover状态的元素的引用，isHovered为表示当前元素是否被悬停的布尔值。

通过上面的代码，使用useHover() hook来实现一个组件，它可以渲染一个div元素，当div被悬停时，显示'hovered'，否则显示'not hovered'。

思路解析： 我们可以使用useRef钩子来引用元素节点，然后监听元素的mouseEnter和mouseLeave事件来设置hover状态，最后返回[ref, isHovered]。

实现代码：

import React, { useRef, useState, useEffect } from 'react';

function useHover() {
  const [isHovered, setIsHovered] = useState(false);
  const ref = useRef(null);

  const handleMouseOver = () => setIsHovered(true);
  const handleMouseOut = () => setIsHovered(false);

  useEffect(() => {
    const node = ref.current;
    if (node) {
      node.addEventListener('mouseover', handleMouseOver);
      node.addEventListener('mouseout', handleMouseOut);
      return () => {
        node.removeEventListener('mouseover', handleMouseOver);
        node.removeEventListener('mouseout', handleMouseOut);
      };
    }
  }, [ref.current]);

  return [ref, isHovered];
}

function App() {
  const [ref, isHovered] = useHover();
  return (
    <div ref={ref}>
      {isHovered ? 'hovered' : 'not hovered'}
    </div>
  );
}

解释说明： 首先，在useHover中定义一个ref，它可以用来获取被监视的元素节点的引用。然后，定义isHovered状态，它表示元素是否悬停。使用useState钩子来初始化该状态。接下来，定义handleMouseOver和handleMouseOut函数，分别用于设置isHovered状态为true或false。最后通过useEffect来监听需要监控的元素节点的mouseover和mouseout事件，并执行相应的处理函数。在App组件中，调用useHover自定义hook，利用返回的ref和isHovered更新UI界面。