透過在reactjs中使用去抖動/節流技術來減少伺服器負載

React.js 中的去抖與節流

去抖動和限制是透過控制函數執行頻率來回應頻繁事件（例如，打字、滾動、調整大小）來最佳化效能的技術。

---

1.什麼是去抖？

去抖動會延遲函數的執行，直到自上次呼叫函數以來經過一定時間後。

用例範例：

• 搜尋輸入欄位：避免每次按鍵觸發 API 呼叫。

React 中的去抖動範例

import React, { useState, useEffect } from 'react';

const DebouncedSearch = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [debouncedValue, setDebouncedValue] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(searchTerm);
    }, 500); // Delay of 500ms

    return () => {
      clearTimeout(handler); // Cleanup on input change
    };
  }, [searchTerm]);

  useEffect(() => {
    if (debouncedValue) {
      console.log('API Call with:', debouncedValue);
      // Make API call here
    }
  }, [debouncedValue]);

  return (
    <input type="text" placeholder="Search..." value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)}
    />
  );
};

export default DebouncedSearch;

---

2.什麼是節流？

限制可確保函數在指定的時間間隔內最多執行一次，無論函數在該時間間隔內被觸發多少次。

用例範例：

• 捲動事件：限制滾動事件期間觸發函數的頻率，以提高效能。

React 中的節流範例

import React, { useEffect } from 'react';

const ThrottledScroll = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scroll event fired');
    }, 1000); // Execute at most once every 1000ms

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <div>




<hr>

<h3>
  
  
  <strong>3. Using Libraries (Optional)</strong>
</h3>

<p>Instead of implementing custom debounce/throttle, you can use popular libraries like:</p>

<h4>
  
  
  <strong>Lodash</strong>
</h4>

<p>Install:<br>
</p>

<pre class="brush:php;toolbar:false">npm install lodash

用法：

import { debounce, throttle } from 'lodash';

// Debounce Example
const debouncedFunc = debounce(() => console.log('Debounced!'), 500);

// Throttle Example
const throttledFunc = throttle(() => console.log('Throttled!'), 1000);

反應使用

安裝：

npm install react-use

用法：

import { useDebounce, useThrottle } from 'react-use';

const Demo = () => {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);
  const throttledValue = useThrottle(value, 1000);

  useEffect(() => {
    console.log('Debounced:', debouncedValue);
    console.log('Throttled:', throttledValue);
  }, [debouncedValue, throttledValue]);

  return (
    <input value="{value}" onchange="{(e)"> setValue(e.target.value)}
      placeholder="Type something..."
    />
  );
};

export default Demo;

---

主要區別

Feature	Debouncing	Throttling
Execution	Executes once after the user stops firing events for a specified time.	Executes at regular intervals during the event.
Use Cases	Search input, resizing, form validation.	Scroll events, button clicks, API polling.
Performance	Reduces the number of function calls.	Limits execution to once per interval.

功能

---

去抖動

節流 標題> 執行

在使用者停止觸發事件指定時間後執行一次。 活動期間定期執行。

用例

搜尋輸入、調整大小、表單驗證。 滾動事件、按鈕點擊、API 輪詢。 性能 減少函數呼叫次數。 將執行限制為每個時間間隔一次。 表>

何時使用