浅谈React useDebounce 防抖原理

目录
  • 1、js防抖
  • 2、React custom Hook useDebounce

1、js防抖

// func 需要去抖动的函数  delay 延时执行时间
const debounce = (func, delay) => {
    let timeout;
    //...param es6语法  获取形参数组 argaments
    return (...param) => {
    	// 每次 进入清除上一个已经执行/未执行的定时器
        if (timeout) {
            clearTimeout(timeout);
        }
        //定时器 delay 时间后执行 func函数
        timeout = setTimeout(() => {
            func(...param);
        }, delay)
    }
}
// 使用
const logPrint= debounce(() =>console.log('打印执行'),2000)
logPrint(); //
logPrint(); //
logPrint(); //
logPrint(); // 打印执行

2、React custom Hook useDebounce

useDebounce

useDebounce 搭配 useEffect useState 的使用

index.js

//utils/index.js
import { useEffect, useState } from 'react';
export const useDebounce = (value, delay) => {
    const [deouncedValue, setDebuouncedValue] = useState(value)
    useEffect(() => {
        //每次在value变化以后，设置一个定时器
        const timeout = setTimeout(() => setDebuouncedValue(value), delay)
        //每次在上一个useEffect处理完以后再运行
        return () => clearTimeout(timeout)
    }, [value, delay])
    return deouncedValue
}

index.jsx

//使用 index.jsx
import {  useDebounce } from 'utils';
......
const [param, setParam] = useState({
    name: '',
    personId: ''
});
const debounceParam = useDebounce(param, 2000);
  useEffect(() => {
  	console.log('打印执行',debounceParam);
    // fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(debounceParam))}`).then(async response => {
    //   if (response.ok) {
    //     setList(await response.json());
    //   }
  }, [debounceParam]);
return(
	<input
	   type="text"
	   value={param.name}
	   onChange={evt =>
	     setParam({
	       ...param,
	       name: evt.target.value
	     })
	   }
	 />
)

到此这篇关于浅谈React useDebounce 防抖原理的文章就介绍到这了,更多相关React useDebounce 防抖内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 通过实例学习React中事件节流防抖

    节流 方法一 import Throttle from 'lodash-decorators/throttle'; export default class Search extends Component { constructor(props) { super(props) this.handleSearch = this.handleSearch.bind(this); } handleSubmit = (e) => { e.preventDefault(); this.handleSea

  • react简单实现防抖和节流

    目录 一.防抖: 二.节流 防抖和节流可以节省资源,减小服务器端压力,提升用户体验. 在日常开发中,我们经常会有这样的需求:监听用户的输入(keyup.keydown).浏览器窗口调整大小和滚动行为(resize).鼠标的移动行为(mousemove)等.如果这些事件一触发我们就执行相应的事件处理函数的话,那将会造成较大的资源浪费或者给用户带来不好的体验. 这时防抖和节流就派上用场了!! 一.防抖: 防抖:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间.思路:

  • 浅谈React useDebounce 防抖原理

    浅谈React useDebounce 防抖原理

    目录 1.js防抖 2.React custom Hook useDebounce 1.js防抖 // func 需要去抖动的函数 delay 延时执行时间 const debounce = (func, delay) => { let timeout; //...param es6语法 获取形参数组 argaments return (...param) => { // 每次 进入清除上一个已经执行/未执行的定时器 if (timeout) { clearTimeout(timeout);

  • 浅谈React双向数据绑定原理

    浅谈React双向数据绑定原理

    目录 什么是双向数据绑定 实现双向数据绑定 数据影响视图 视图影响数据 如果已经学过Vue,并且深入了解过Vue的双向数据绑定的话,就会明白 Vue 2.0 双向数据绑定的核心其实是通过Object.defineProperty来实现数据劫持和监听. 在 Vue 3.0 中则通过 Proxy来实现对整体对象的监听,对 Vue2.0 的优化. 什么是双向数据绑定 数据模型和视图之间的双向绑定. 当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化:可以这样说用户在视图

  • 浅谈React底层实现原理

    目录 1. props,state与render函数关系,数据和页面如何实现互相联动? 2. React中的虚拟DOM 常规思路 改良思路(仍使用DOM) React的思路 深入理解虚拟DOM 3. 虚拟DOM的diff算法 4. React中ref的使用 5. React中的生命周期函数 6. 生命周期函数的使用场景 1. props,state与render函数关系,数据和页面如何实现互相联动? 当组件的state或者props发生改变的时候,自己的render函数就会重新执行.注意:当父组

  • 浅谈React Event实现原理

    React 元素的事件处理和 DOM元素的很相似.但是有一点语法上的不同: React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 并且 React 自己内部实现了一个合成事件,使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器.你仅仅需要在这个元素初始渲染的时候提供一个监听器. 我们看一下这是怎么实现的 React 事件机制分为 事

  • 浅谈React中组件逻辑复用的那些事儿

    基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码.那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方法,希望你读完之后能够有所收获.如果你对这些内容已经非常清楚,那么略过本文即可. 我已尽量对文中的代码和内容进行了校验,但是因为自身知识水平限制,难免有错误,欢迎在评论区指正. 1. Mixins Mixins 事实上是 React.createClass 的产物了.当然,如果你曾经在低版本的 react 中使用过 Mixins,

  • 浅谈React 属性和状态的一些总结

    一.属性 1.第一种使用方法:键值对 <ClaaNameA name = "Tom" /> <ClaaNameA name = {Tom} /> <ClaaNameA name = {"Tom"} /> <ClaaNameA name = {[1,2,3]} />//数组 <ClaaNameA name = {FunctionNAme} /> //定义一个函数 2.第二种方法:三个点的展开对象形式 var

  • 浅谈react.js中实现tab吸顶效果的问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

  • 浅谈react+es6+webpack的基础配置

    这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac

  • 浅谈线性表的原理及简单实现方法

    浅谈线性表的原理及简单实现方法

    一.线性表 原理:零个或多个同类数据元素的有限序列 原理图: 特点 : 1.有序性 2.有限性 3.同类型元素 4.第一个元素无前驱,最后一个元素无后继,中间的元素有一个前驱并且有一个后继 线性表是一种逻辑上的数据结构,在物理上一般有两种实现 顺序实现和链表实现 二.基于数组的 线性表顺序实现 原理 : 用一段地址连续的存储单元依次存储线性表数据元素. 原理图: 算法原理: 1.初始化一个定长的数组空间 elementData[] , size 存储长度 存储元素 2.通过索引来快速存取元素 3

  • 浅谈react.js 之 批量添加与删除功能

    浅谈react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的  deleteType(),它是调用删除index数量的方法  removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把

随机推荐