在类组件中，使用节流函数可以在componentDidMount中定义.

而在hooks函数中，该怎么定义呢，我们一起看看。

要使用useCallback包起来，返回一个记忆的缓存函数，这样才能达到节流的目的。否则会无限重新创建节流函数，节流无效。并且要将Input的值作为依赖项，及时的更新节流的函数，否则函数里面拿不到最新的toolEntityNo值。

这只是个简单的按回车的回调。如果是搜索框那就更简单了，直接用useCallback包一下就行了，不需要依赖项。

参考：https://juejin.cn/post/6969572789581938718

hooks组件中，使用防抖节流的方法。的更多相关文章

  1. react组件中返回并列元素的方法

    我们在写react组件的时候,经常会遇到这种问题,在render中return元素只能有一个顶级元素,比如div,假如写成这样就会报错: render(){ return( <div>12 ...

  2. Vue.js 组件中data的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. React Hooks中父组件中调用子组件方法

    React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...

  4. 函数防抖节流的理解及在Vue中的应用

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...

  5. 来聊聊JavaScript中的防抖和节流

    目录 JavaScript防抖和节流 问题还原 防抖 什么是防抖 使用场景 节流 什么是节流 使用场景 JavaScript防抖和节流 问题还原 我们先来通过代码把常见的问题还原: <html& ...

  6. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  7. 如何在Vue中优雅的使用防抖节流

    1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实 ...

  8. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  9. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  10. Reactjs组件中的方法为什么绑定this?

    前言:Reactjs中的定义的方法其实是基于实例的原型方法:es6默认严格模式   问题:在Reactjs组件中写入以下代码,那么执行结果会是什么呢? ··· 结果是这样的: 对的,你没看错,不是do ...

随机推荐

  1. 部署Kubernetes v1.22.10高可用集群

    一.概述 Kubernetes集群控制平面(Master)节点右数据库服务(Etcd)+其它服务组件(Apiserver.Controller-manager.Scheduler等)组成:整个集群系统 ...

  2. Windows 10系统设置多用户同时远程登录教程 and rdpwrap下载 and Win10多用户同时远程桌面的另类解决方案---支持1809和1909和2004版本V2.0

    转载简书: Windows 10系统设置多用户同时远程登录教程 - 简书 (jianshu.com) 转载github: 发布 ·stascorp/rdpwrap ·GitHub 转载csdn: Wi ...

  3. layui 父子弹窗数据交互(包含子弹窗自己关闭并给父弹窗数据填充)

    //父级弹窗 function showAlertOrg() { layui.use('layer', function () { var body; var index = layer.open({ ...

  4. swiper弹出窗口居中效果css

    position: absolute; width: 800px; left: 50%; top: 50%; transform: translate(-50%, -50%);

  5. Word 设置段前分页

    描述 这两个标题在第一个标题的页中,且两个标题都没有独立分页.要让每一个标题独立分页,需要对标题的格式进行修改. 段前分页指的是标题与标题之间不在同一个页中,每一个标题都在独立的页中. 设置段前分页 ...

  6. Luffy项目：2、项目需求（2），项目库的创建，软件开发目录，Django配置文件介绍

    目录 Luffy项目 一.Luffy项目需求(2) 1.后台日志封装 2.全局异常处理.封装 3.封装Response对象 二.Luffy项目数据库创建 1.创建用户数据库 2.使用项目链接数据库 2 ...

  7. 【django-vue】前端取消默认样式 main.js配置 后端主页模块接口 跨域问题详解 项目自定义配置 git介绍和安装

    目录 回顾 上节课回顾 今日内容 1 前端全局样式和js配置 1.1 global.css 1.2 settings.js 1.3 main.js 2 后端主页模块接口 三种开发模式 模型父类Base ...

  8. cximage菜单(Load Jpeg Resource)

    // 菜单项 cximage->resource->Load Jpeg Resource //CxImage\demo\demo.cpp ON_COMMAND(ID_CXIMAGE_LOA ...

  9. Vue 组件VueComponent中_ _proto_ _ 原型对象的指向（指向Vue的原型对象 _ _proto_ _）

    1.VueComponent.prototype.__proto__ === Vue.prototype 2.让组件实例对象(vc)可以访问到Vue原型上的属性.方法 图片如下: 案例: Vue.pr ...

  10. centos mininet安装-坑

    https://blog.csdn.net/milesandnick/article/details/108017349?utm_medium=distribute.pc_relevant.none- ...