目录
  • 防抖
    • 代码：
  • 节流
    • 代码：
  • 拓展：
    • 心得：

      下面均拿一个input框的onChange事件为例。

      防抖

      1.当持续触发事件时，一定时间段内没有再触发事件，事件处理函数会执行一次。

      2.如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

      代码：

      方法一：

      import React from "react"; function ThrotShak() { let shak; const service = (data) => { console.log('向服务端发送数据', data); } const handleChange = (e) => { if (shak) { clearTimeout(shak) } shak = setTimeout(() => { service(e.target.event); }, 3000) } return ( <div style={{ flex: 1, border: '1px solid blue', padding: '3px' }}> <div>防抖：多次触发执行最后一次</div> <input onChange={handleChange} /> </div> ) } export default ThrotShak;

      方法二：

      import React from 'react'; import { debounce } from 'lodash'; function ThrotShak(){ const service = (data) => { console.log('向服务端发送数据', data); } const handleChange = () => debounce(service, 500); return ( <input type="text" onChange={handleChange} /> ); }; export default ThrotShak;

      节流

      当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

      代码：

      方法一：

      import React from "react"; function ThrotShak() { const service = (data) => { console.log('向服务端发送数据', data, new Date()); } let throt; function handleChange() { if (throt) { return ; } throt = setTimeout(() => { service(); throt = null; }, 3000) } return ( <div style={{ flex: 1, border: '1px solid blue', padding: '3px' }}> <div>节流： 持续触发事件时，每过n钟执行一次</div> <input onChange={handleChange} /> </div> ) } export default ThrotShak;

      方法二：

      import React from 'react'; import { throttle } from 'lodash'; function ThrotShak(){ const service = (data) => { console.log('向服务端发送数据', data); } const handleChange = () => throttle(service, 500); return ( <input type="text" onChange={handleChange} /> ); }; export default ThrotShak;

      拓展：

      除上面两种实现方法外，还可用用useEffect实现。无论哪种实现方式，大家要以自己的应用场景为准，还要考虑一下性能问题。本身选择防抖或者节流就是要提高性能（减少频繁触发事件，降低不必要的计算，渲染和服务器请求），节约资源（减少浪费服务器资源和带宽），提高用户体验（防止用户误触或者频繁点击）。

      实现过程中大家要注意clearTimeout和把赋值参数置为null的区别：clearTimeout是指把定时器清楚掉，并不会把定时器的id置为null，一般用于定时器挂载并未执行时；把赋值参数置为null是要清除缓存，这里不懂得话，可以看一下闭包和浏览器垃圾回收机制得原理。在组件卸载时把定时器清除掉和id置为null一起调用比较好。

      心得：

      一题多解还是有必要得，既拓宽了自己得思路，又增加了解题技巧，当然，解题还是会受场景和代码框架约束得。

      到此这篇关于react hooks实现防抖节流的方法小结的文章就介绍到这了,更多相关react hooks防抖节流内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！

      您可能感兴趣的文章:

      • react hooks使用Echarts图表中遇到的情况及相关配置问题
      • React hooks中useState踩坑之异步的问题
      • React自定义hooks同步获取useState的最新状态值方式
      • React hooks异步操作踩坑记录
      • react hooks页面实时刷新方式(setInterval)