【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,有需要的自行取用。

全文完~~

相关推荐
无名客01 小时前
npm run dev 启动项目 报Error: listen EACCES: permission denied 0.0.0.0:80 解决方法
前端·javascript·vue.js
零点七九1 小时前
vue npm install卡住没反应
前端·vue.js·npm
墨菲安全1 小时前
NPM组件 @0xme5war/apicli 等窃取主机敏感信息
前端·npm·node.js·主机信息窃取·npm恶意包·npm投毒
Komorebi_99991 小时前
vue create 项目名 和 npm init vue@latest 创建vue项目的不同
前端·vue.js·npm
好好研究4 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
程序视点8 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian8 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0018 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴9 小时前
Smoothstep
前端·webgl
若梦plus9 小时前
Eslint中微内核&插件化思想的应用
前端·eslint