【vue react 项目常用hooks】useDebounceVal

【vue react 项目常用hooks】useDebounceVal

我们经常需要对搜索进行防抖,有时还需要拿到防抖后的数据传递给下游组件,这个时候就需要用到这个 useDebounceVal,请看 vuereact 中分别如何实现。

1、分析

useDebounceVal 的输入是为防抖前的 val, 还有防抖duration,输出是一个防抖后的val.

所以函数是长这样:

ts 复制代码
declare function useDebounceVal<T>(val: T, duration: number): T;

debounce 可以自己实现,也可以使用 lodash 等工具。

需要注意的是,react 中需要实现 debouncecancel 函数, vue 可以不需要。

2、react 版

js 复制代码
import { useState, useEffect } from 'react';
import { debounce } from 'lodash-es';

export function useDebounceVal(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = debounce(() => {
      setDebouncedValue(value);
    }, delay);

    handler();
    return () => handler.cancel();
  }, [value, delay]);

  return debouncedValue;
}

使用方法:

js 复制代码
const [searchQuery, setSearchQuery] = useState('');
const debouncedSearchQuery = useDebounceVal(searchQuery);

3、vue 版

vue 版有2种,一种跟上面类似(普通版),还有一种是借助 customRef 来实现。分别如下:

3-1、普通版

js 复制代码
import { ref, watch } from 'vue';
import { debounce } from 'lodash-es';

export function useDebounceVal(value, delay = 500) {
  const debouncedValue = ref(value.value);

  const updateValue = debounce((newValue) => {
    debouncedValue.value = newValue;
  }, delay);

  watch(value, (newValue) => {
    updateValue(newValue);
  });

  return debouncedValue;
}

使用方法:

js 复制代码
const searchQuery = ref('');
const debouncedSearchQuery = useDebounceVal(searchQuery);

3-2、customRef版

js 复制代码
import { customRef } from 'vue';

export function useDebounceRef(value, delay = 500) {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      },
    };
  });
}

使用方法:

js 复制代码
const searchQuery = useDebounceRef('');

4、分析2

看到这里有些同学可能还在疑惑,为啥要这个东西,不用可不可以。那我们先看看下面的情况。通常我们会把输入框和查询结果放到一起处理,如下:

jsx 复制代码
<div className='search-container'>
  <input
    type='text'
    value={searchQuery}
    onChange={handleInputChange}
    placeholder='请输入搜索内容'
  />
  <SearchResults searchQuery={debouncedSearchQuery} />
</div>

但有的时候,SearchResults 逻辑不是我们控制的(比如其他同事或者下游业务),或者是我们控制但是想把逻辑内聚到 SearchResults 组件里面。期望的效果是:我们只需要把 debouncedVal 数据传递给 SearchResults 就行了,于是就有了这个 hooks 的用武之地。

diff 复制代码
<div className='search-container'>
  <input
    type='text'
    value={searchQuery}
    onChange={handleInputChange}
    placeholder='请输入搜索内容'
  />
-  <SearchResults searchQuery={debouncedSearchQuery} />
+  <SearchResults searchVal={debouncedSearchVal} />
</div>

5、总结

本文分析了为啥需要 useDebounceVal,并编写了 vuereact 版的 useDebounceVal,有需要的自行取用。

全文完~~

相关推荐
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue771 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人1 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD1 小时前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟1 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计