持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

今天开始一起学习分享 ahooks 的源码

ahooks是阿里巴巴出品的一套高质量可靠的 React Hooks 库

今天分享第6个 hooks-useHover

useHover

首先看下 useHover 的作用是什么

useHover 的作用是监听 DOM 元素是否有鼠标悬停。

接下来看下 API

API

const isHovering = useHover(
  target,
  {
   onEnter,
   onLeave,
   onChange
  }
);

Params

参数有2个，1个是必须传的，就是要监听的dom元素，可以传入 dom节点，也可以传入 Ref对象。另外一个是额为的配置项。

参数	说明	类型	默认值
target	DOM 节点或者 Ref 对象	`() => Element` \| `Element` \| `MutableRefObject<Element>`	-
options	额外的配置项	`Options`	-

Options

额外的配置项有3个，第一个是onEnter，表示hover 时触发的函数。第二个是onLeave，表示取消 hover 时触发的函数。第三个是onChange，表示hover 状态变化时触发的函数

参数	说明	类型	默认值
onEnter	hover 时触发	`() => void`	-
onLeave	取消 hover 时触发	`() => void`	-
onChange	hover 状态变化时触发	`(isHovering: boolean) => void`	-

Result

返回值只有1个，就是isHovering，类型是boolean值，表示鼠标元素是否处于 hover状态

参数	说明	类型
isHovering	鼠标元素是否处于 hover	`boolean`

接下来看下用法

基本用法

使用 ref 设置需要监听的元素。

import React, { useRef } from 'react';
import { useHover } from 'ahooks';

export default () => {
  const ref = useRef(null);
  const isHovering = useHover(ref);
  return <div ref={ref}>{isHovering ? 'hover' : 'leaveHover'}</div>;
};

处于 hover 状态时

不处于 hover 状态时

传入 DOM 元素

传入 function 并返回一个 dom 元素。

import React from 'react';
import { useHover } from 'ahooks';

export default () => {
  const isHovering = useHover(() => document.getElementById('hover-div'), {
    onEnter: () => {
      console.log('onEnter');
    },
    onLeave: () => {
      console.log('onLeave');
    },
    onChange: isHover => {
      console.log('onChange', isHover);
    },
  });

  return <div id="hover-div">{isHovering ? 'hover' : 'leaveHover'}</div>;
};

处于 hover 状态时

不处于 hover 状态时

接下来一起看下源码

源码

1.首先定义目标元素的类型

import type { BasicTarget } from '../utils/domTarget';


target: BasicTarget

2.定义可选参数的类型

export interface Options {
  onEnter?: () => void;
  onLeave?: () => void;
  onChange?: (isHovering: boolean) => void;
}

options?: Options

3.定义返回结果的类型

export default (target: BasicTarget, options?: Options): boolean => {}

通过 useBoolean这个hooks，来初始化，这个hooks我们后续再来分析。

const [state, { setTrue, setFalse }] = useBoolean(false);

5.通过传入的 options 来引入 3个函数参数

const { onEnter, onLeave, onChange } = options || {};

6.使用 useEventListener 这个hooks来监听 mouseenter 事件,监听到mouseenter事件时候，将onEnter函数执行，同时将setTrue执行，表示将state设置为true，用来最后返回这个结果，同时将onChange执行，也用来设置成true

useEventListener(
    'mouseenter',
    () => {
      onEnter?.();
      setTrue();
      onChange?.(true);
    },
    {
      target,
    },
  );

7.使用 useEventListener 这个hooks来监听 mouseleave 事件,监听到mouseleave事件时候，将onLeave函数执行，同时将setFalse执行，表示将state设置为false，用来最后返回这个结果，同时将onChange执行，也用来设置成false

useEventListener(
    'mouseleave',
    () => {
      onLeave?.();
      setFalse();
      onChange?.(false);
    },
    {
      target,
    },
  );

最后返回state

ahooks源码分析-useHover