React Hooks 工具库 aHooks 解析之 usePersistFn

2023-12-26 11:00:06

前言

aHooks 是阿里巴巴开源的一个 React Hooks 库，其中有很多 hooks 实现得很巧妙，一起来看看吧，本文的主角是 usePersistFn。

usePersistFn 函数是用来防抖的，防抖是指在给定的时间段内，如果函数被调用多次，那么只执行一次。

import { usePersistFn } from 'ahooks';

const Comp = () => {
  const onClick = () => {
    console.log('clicked');
  };

  const persistOnClick = usePersistFn(onClick, {
    wait: 500, // 500ms 的防抖时间
  });

  return <button onClick={persistOnClick}>Click me</button>;
};

工作原理

usePersistFn 函数的原理很简单，它内部使用了两个计时器，一个用来控制防抖时间，另一个用来控制函数的执行。当函数被调用时，第一个计时器会启动，如果在防抖时间内函数又被调用，那么第一个计时器会被重置，这样就保证了函数只会被执行一次。当防抖时间到了，第二个计时器会启动，函数会被执行。

应用场景

usePersistFn 函数可以用于很多场景，比如：

搜索框中的输入，当用户在搜索框中输入时，usePersistFn 函数可以防止函数被频繁调用，从而提高性能。
表单中的提交，当用户提交表单时，usePersistFn 函数可以防止函数被多次提交，从而防止数据重复提交。
按钮的点击，当用户点击按钮时，usePersistFn 函数可以防止函数被频繁调用，从而提高性能。

代码示例

import { usePersistFn } from 'ahooks';

const Comp = () => {
  const onClick = () => {
    console.log('clicked');
  };

  const persistOnClick = usePersistFn(onClick, {
    wait: 500, // 500ms 的防抖时间
  });

  return <button onClick={persistOnClick}>Click me</button>;
};