React函数式组件中同一JSX元素单双击事件的实现与优化问询

在React函数式组件中，如何规范地为同一元素注册单击、双击事件？我通过自定义Hook useClickHook 结合setTimeout实现了功能，但想知道如何优化实现；另外我发现可以移除onDoubleClick事件处理器来减少setClick调用次数，希望得到更多改进建议。

原实现代码 #

自定义Hook useClickHook

import { useState, useEffect } from 'react';

export const useClickHook = (detail) => {
    const [clickDetail, setClickDetail] = useState(0);

    useEffect(() => {
        const timer = setTimeout(() => {
            setClickDetail(detail)
        }, 200);
        
        return () => {
            clearTimeout(timer);
        }
    }, [detail]);

    return clickDetail;
}

组件使用代码

import { useEffect, useState } from 'react';

import { useClickHook } from './ClickHook';

function App() {
  const [click, setClick] = useState(0);
  const clickHook = useClickHook(click);

  useEffect(() => {
    if (clickHook === 1) {
      console.log('single click')
    }

    if (clickHook === 2) {
      console.log('double click')
    }

    setClick(0);
  },[clickHook])

  return (
    <div className="App">
      Hello World
      <button
        onClick={(e) => {
          setClick(e.detail);
        }}
        onDoubleClick={(e) => {
          setClick(e.detail);
        }}
      >
        Click
      </button>
    </div>
  );
}

export default App;

优化建议与改进方案 #

1. 确认移除onDoubleClick的合理性

双击操作会触发两次onClick事件，第二次onClick的e.detail值为2，因此确实不需要额外监听onDoubleClick——移除后既减少了一次不必要的函数调用，也不会影响双击逻辑的判断，这是正确的优化方向。

2. 封装回调逻辑，让Hook更易用

将单击、双击的回调函数作为参数传入Hook，Hook内部直接处理判断逻辑，无需组件额外监听状态变化，降低组件与Hook的耦合度。

3. 简化状态管理，移除组件内冗余状态

原实现中组件维护了click状态，可将点击计数逻辑完全封装到Hook内部，避免组件状态的不必要流转。

4. 优化定时器逻辑，减少无效状态更新

原Hook依赖外部传入的detail触发定时器，改为在Hook内部维护点击次数，仅在点击时更新计数并启动/清除定时器，逻辑更清晰。

改进后的完整代码 #

优化后的自定义Hook useClickDoubleClick

import { useState, useCallback, useEffect } from 'react';

export const useClickDoubleClick = (onSingleClick, onDoubleClick, delay = 200) => {
  // 内部维护点击计数，无需外部传入状态
  const [clickCount, setClickCount] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => {
      // 延迟结束后判断点击次数，执行对应回调
      if (clickCount === 1) {
        onSingleClick?.();
      } else if (clickCount === 2) {
        onDoubleClick?.();
      }
      // 重置计数
      setClickCount(0);
    }, delay);

    // 组件卸载或计数变化时清除定时器
    return () => clearTimeout(timer);
  }, [clickCount, onSingleClick, onDoubleClick, delay]);

  // 用useCallback缓存点击处理函数，避免组件重复渲染
  const handleClick = useCallback(() => {
    setClickCount(prev => prev + 1);
  }, []);

  return handleClick;
};

优化后的组件使用

import { useClickDoubleClick } from './useClickDoubleClick';

function App() {
  // 直接从Hook获取点击处理函数，传入对应回调
  const handleClick = useClickDoubleClick(
    () => console.log('single click'),
    () => console.log('double click')
  );

  return (
    <div className="App">
      Hello World
      {/* 仅需绑定onClick事件 */}
      <button onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Paul Gutsal