手写自定义 Hook

useLockFn 是 ahooks 里的经典 hook：给一个异步函数加锁，在它执行完之前，重复调用直接被忽略。典型场景是防止用户狂点提交按钮导致重复请求。

参考实现

点击展开

import { useRef, useCallback } from "react";

function useLockFn(fn) {
  const lockRef = useRef(false); // 锁标志，用 ref 不触发重渲染

  return useCallback(
    async (...args) => {
      if (lockRef.current) return; // 已上锁 → 丢弃这次调用
      lockRef.current = true;
      try {
        return await fn(...args); // 等待异步完成
      } finally {
        lockRef.current = false; // 解锁
      }
    },
    [fn],
  );
}

function SubmitButton() {
  const submit = useLockFn(async () => {
    await fetch("/api/order", { method: "POST" });
  });

  return <button onClick={submit}>提交</button>;
  // 快速连点，只有第一次生效，其余在完成前被忽略
}

最近有点忙，然后前端每日一题整体路线还没规划好，所以这几天先把面试真题补上几道用 = =

手写自定义 Hook

参考实现

评论