react hooks實(shí)現(xiàn)防抖節(jié)流的方法小結(jié)

更新時(shí)間：2024年04月19日 09:04:43 作者：雙子座434

這篇文章主要介紹了react hooks實(shí)現(xiàn)防抖節(jié)流的幾種方法,文中通過代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

防抖

1.當(dāng)持續(xù)觸發(fā)事件時(shí)，一定時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)會(huì)執(zhí)行一次。

2.如果設(shè)定的時(shí)間到來之前，又一次觸發(fā)了事件，就重新開始延時(shí)。

代碼：

方法一：

import React from "react";
 
function ThrotShak() {
  let shak;
 
  const service = (data) => {
    console.log('向服務(wù)端發(fā)送數(shù)據(jù)', 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>防抖：多次觸發(fā)執(zhí)行最后一次</div>
        <input onChange={handleChange} />
      </div>
  )
}
 
export default ThrotShak;

方法二：

import React from 'react';
import { debounce } from 'lodash';
 
function ThrotShak(){
  const service = (data) => {
    console.log('向服務(wù)端發(fā)送數(shù)據(jù)', data);
  }
 
  const handleChange = () => debounce(service, 500);
 
  return (
    <input type="text" onChange={handleChange} />
  );
};
 
export default ThrotShak;

節(jié)流

當(dāng)持續(xù)觸發(fā)事件時(shí)，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)。

代碼：

方法一：

import React from "react";
 
function ThrotShak() {
  const service = (data) => {
    console.log('向服務(wù)端發(fā)送數(shù)據(jù)', 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>節(jié)流： 持續(xù)觸發(fā)事件時(shí)，每過n鐘執(zhí)行一次</div>
        <input onChange={handleChange} />
      </div>
  )
}
 
export default ThrotShak;

方法二：

import React from 'react';
import { throttle } from 'lodash';
 
function ThrotShak(){
  const service = (data) => {
    console.log('向服務(wù)端發(fā)送數(shù)據(jù)', data);
  }
 
  const handleChange = () => throttle(service, 500);
 
  return (
    <input type="text" onChange={handleChange} />
  );
};
 
export default ThrotShak;

拓展：

除上面兩種實(shí)現(xiàn)方法外，還可用用useEffect實(shí)現(xiàn)。無論哪種實(shí)現(xiàn)方式，大家要以自己的應(yīng)用場(chǎng)景為準(zhǔn)，還要考慮一下性能問題。本身選擇防抖或者節(jié)流就是要提高性能（減少頻繁觸發(fā)事件，降低不必要的計(jì)算，渲染和服務(wù)器請(qǐng)求），節(jié)約資源（減少浪費(fèi)服務(wù)器資源和帶寬），提高用戶體驗(yàn)（防止用戶誤觸或者頻繁點(diǎn)擊）。

實(shí)現(xiàn)過程中大家要注意clearTimeout和把賦值參數(shù)置為null的區(qū)別：clearTimeout是指把定時(shí)器清楚掉，并不會(huì)把定時(shí)器的id置為null，一般用于定時(shí)器掛載并未執(zhí)行時(shí)；把賦值參數(shù)置為null是要清除緩存，這里不懂得話，可以看一下閉包和瀏覽器垃圾回收機(jī)制得原理。在組件卸載時(shí)把定時(shí)器清除掉和id置為null一起調(diào)用比較好。

心得：

一題多解還是有必要得，既拓寬了自己得思路，又增加了解題技巧，當(dāng)然，解題還是會(huì)受場(chǎng)景和代碼框架約束得。

到此這篇關(guān)于react hooks實(shí)現(xiàn)防抖節(jié)流的方法小結(jié)的文章就介紹到這了,更多相關(guān)react hooks防抖節(jié)流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: