在 React 中轻松掌握防抖（Debounce）和节流（Throttle）

在前端开发中，我们经常遇到需要处理高频触发的事件或函数调用，例如实时搜索、窗口调整等。为了提高性能和用户体验，我们通常会使用防抖（Debounce）和节流（Throttle）这两种技术。下面我们来详细了解一下它们的工作原理以及如何在 React 中使用它们。
一、防抖（Debounce）
防抖是指将连续触发的事件或函数调用延迟一定时间后再执行。如果在这段时间内再次触发事件，则重新计算执行时间。其核心思想是“一定时间内只执行一次”。

1. 实例解析
   假设我们有一个实时搜索功能，用户每次输入都会触发搜索请求。为了减少请求次数，我们可以使用防抖。当用户停止输入一段时间后，再发送请求。
   下面是一个简单的防抖示例：

   function debounce(func, wait) {
   let timeout;
   return function() {
   const context = this;
   const args = arguments;
   clearTimeout(timeout);
   timeout = setTimeout(() => func.apply(context, args), wait);
   };
   }

   在上面的示例中，当连续触发事件时，clearTimeout会取消之前的定时器，并设置一个新的定时器。等待时间结束后，setTimeout内部的函数将被执行。
2. 在 React 中应用防抖
   在 React 中，我们可以将防抖应用于组件的生命周期方法或事件处理函数。例如，在componentDidUpdate中使用防抖来减少不必要的渲染：

   import React, { useEffect } from 'react';
   import debounce from './debounce';
   function MyComponent() {
   const handleSearch = debounce((query) => {
   // 执行搜索操作
   }, 500);
   useEffect(() => {
   handleSearch(query);
   }, [query]); // 当 query 变化时触发防抖函数
   }

   在上面的示例中，当query发生变化时，useEffect内的防抖函数会被触发。由于使用了防抖，即使连续输入，搜索操作也不会立即执行，而是在500毫秒后执行一次。
   二、节流（Throttle）
   节流是指将连续触发的事件或函数调用限制在一定时间内只执行一次。其核心思想是“单位时间内只执行一次”。
3. 实例解析
   假设我们有一个窗口调整事件，当用户拖动窗口时会不断触发。为了提高性能，我们可以使用节流。即每次事件触发后，忽略后续一段时间内的重复触发。
   下面是一个简单的节流示例：

   function throttle(func, limit) {
   let inThrottle;
   return function() {
   const context = this;
   const args = arguments;
   if (!inThrottle) {
   func.apply(context, args);
   inThrottle = true;
   setTimeout(() => inThrottle = false, limit);
   }
   };
   }

   在上面的示例中，当连续触发事件时，会检查是否已经在节流中。如果是，则忽略该事件；否则，执行函数并将inThrottle设置为true。等待一定时间后，将inThrottle设置为false，以允许下一个事件触发。
4. 在 React 中应用节流
   在 React 中，我们可以将节流应用于生命周期方法或事件处理函数。例如，在componentDidUpdate中使用节流来限制渲染频率：
   ```javascript
   import React, { useEffect } from ‘react’;
   import throttle from ‘./throttle’;
   function MyComponent() {
   const handleResize = throttle((newSize) => {
   // 更新组件尺寸或状态等操作
   }, 200); // 每200毫秒只执行一次操作
   useEffect(() => {
   handleResize(window.innerWidth); // 当窗口尺寸变化时触发节流函数
   }, [window.innerWidth]); // 当 window.innerWidth 变化时重新计算节流函数执行时间戳和清除之前的定时器等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作等操作