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界面。