React Debounce 去抖動

發表於 | 分類於 | |

最近在 app 上寫一個簡單的欄位試算功能
有用到去抖動這個小技巧
和大家簡單分享一下

內文:

  • Debounce

Debounce


去抖動這個技巧 主要是用在避免短時間內重複觸發事件而造成過多不必要的運算

可以利用 useEffect 在原件卸載時 執行 return function 把計時器清除
在 update 元件時 重新設定計時器要執行的代碼
代碼可參考如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useState, useEffect } from "react";

export default () => {
  // ... 省略 ...

  useEffect(() => {
    const timer = setTimeout(() => {
      const result = amount * rate;
      setResultAmount(result);
    }, 500);
    return () => clearTimeout(timer);
  }, [amount]);

  // ... 省略 ...
};

本文作者： David Huang
本文地址： https://davidblog.github.io/2020/09/26/debounce/

0%