React useHover钩子

处理包装组件的悬停事件。

• 使用useState()钩子创建一个变量来保存悬停状态。
• 使用useCallback()钩子来记忆两个更新状态的处理函数。
• 使用useCallback()钩子创建一个回调引用，并创建或更新'mouseover'和'mouseout'事件的监听器。
• 使用useRef()钩子来跟踪最后一个传递给callbackRef的节点，以便能够删除其监听器。

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];
};

```javascript
const MyApp = () => {
  const [hoverRef, isHovering] = useHover();

  return <div ref={hoverRef}>{isHovering ? '悬停中' : '未悬停'}</div>;
};

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