IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> useEffect中防抖为什么不起作用?react hooks中如何写防抖? -> 正文阅读

[JavaScript知识库]useEffect中防抖为什么不起作用?react hooks中如何写防抖?

一、发现问题,useEffect 中防抖无效:

若直接在useEffect()中调用防抖函数,会发现防抖不起作用

export default function MyComponent(){
  function handleAdd() {
    setValue(value + 1);
  }
  // 防抖函数内部逻辑,这里简单实现,根据实际需求写
  const handleDebounce = debounce((value) => {
    console.log(value);
  },500);

  useEffect(() => {
    handleDebounce(value)
  }, [value]);
  
 return (
  <>
     <p>{value}</p>
     <Button onClick={handleAdd}>点击加1</Button>
  </>
  )
}

效果如图所示,点击5次,打印5次(是无效的防抖):
点击5次

效果
原因:useEffect 会在每轮渲染结束后执行,在state发生改变时,也会重新执行。因而,这里的value每变化一次,debounce 函数就会重新生成一次,其内部逻辑就会执行一次。

二、解决问题,保存防抖函数,避免重新生成。

思想:用 ref 保存一下防抖函数,后面再触发useEffect时,就不会生成新的防抖函数了。
同时,了解一下如何自定义hooks

第一步:使用第三方库 loadash 的debounce方法,自定义一个防抖hooks,文件名叫 debounce.js 。代码如下:

  import { debounce } from 'lodash';
  const useMyDebounce = (fun, wait, options) => {
    const myRef = useRef();
    if (!myRef.current) {
      myRef.current = debounce(fun, wait, options);
    }
    return myRef.current;
  };
  export default useMyDebounce;

第二步:在函数组件中使用:

import { Button } from 'antd';
import { useEffect, useRef, useState } from 'react';
// 自定义hooks文件的路径,根据自己的目录结构
import useMyDebounce from $hooks/debounce.js;

export default function MyComponent(){
  const [value, setValue] = useState(0);
  // 更改状态
  function handleAdd() {
    setValue(value + 1);
  }
  // 防抖函数内部逻辑,这里简单实现,根据实际需求写
  const handleDebounce =useMyDebounce((value) => {
    console.log(value);
  },500);

  useEffect(() => {
  	// 要执行防抖的逻辑
    handleDebounce(value);
    // 组件销毁时,取消防抖,查看文末“注释1”
    return ()=>{
      handleDebounce.cancel()
    }
  }, [value]);
  
  return (
  <>
     <p>{value}</p>
     <Button onClick={handleAdd}>点击加1</Button>
  </>
  )
}

不停的点击按钮,效果图:
点击
控制台打印

注释1:为防止内存泄漏,清除函数会在组件卸载前执行。另外,如果组件多次渲染(通常如此),则在执行下一个 effect 之前,上一个 effect 就已被清除。清除函数即为effect函数的return函数。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-08-19 18:55:10  更:2022-08-19 18:56:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年6日历 -2024/6/17 4:58:37-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码