React 防抖与节流用法

在React中，防抖和节流是优化性能和提升用户体验的常用技术。下面是它们的用法：

防抖（Debounce）：
防抖是指在某个事件触发后，等待一段时间后执行回调函数。如果在等待时间内再次触发该事件，将重新计时。这样可以避免频繁触发事件导致性能问题。

在React中使用防抖的常见场景是处理输入框的搜索功能。当用户输入时，我们可以设置一个延迟时间，只有在用户停止输入一段时间后才触发搜索请求。

以下是使用Lodash库中的debounce函数来实现防抖的示例代码：

import React, { useState } from 'react';
import { debounce } from 'lodash';

const SearchBox = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = debounce((value) => {
    // 处理搜索逻辑
    console.log(value);
  }, 500);

  const handleChange = (event) => {
    const { value } = event.target;
    setSearchTerm(value);
    handleSearch(value);
  };

  return (
    <input type="text" value={searchTerm} onChange={handleChange} />
  );
};

export default SearchBox;

在上面的代码中，我们使用debounce函数将handleSearch函数包装起来，设置了500毫秒的延迟时间。每次用户输入时，handleChange函数会更新searchTerm的值，并调用handleSearch函数。但是，由于防抖的作用，只有在用户停止输入500毫秒后，才会执行真正的搜索逻辑。

节流（Throttle）：
节流是指在某个事件触发后，固定时间间隔内只执行一次回调函数。这样可以控制事件触发的频率，避免过多的计算和请求。

在React中使用节流的常见场景是处理滚动事件或窗口调整大小事件。当用户频繁滚动页面或调整窗口大小时，我们可以设置一个固定的时间间隔，只在该时间间隔内执行一次回调函数。

以下是使用Lodash库中的throttle函数来实现节流的示例代码：

import React, { useEffect } from 'react';
import { throttle } from 'lodash';

const ScrollComponent = () => {
  const handleScroll = throttle(() => {
    // 处理滚动逻辑
    console.log('Scrolling...');
  }, 200);

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

  return (
    <div>Scrollable Content</div>
  );
};

export default ScrollComponent;

在上面的代码中，我们使用throttle函数将handleScroll函数包装起来，设置了200毫秒的时间间隔。每次滚动事件触发时，handleScroll函数会被调用，但是由于节流的作用，只有在200毫秒内第一次滚动事件触发时，才会真正执行滚动逻辑。

请注意，以上示例代码中使用了Lodash库来提供防抖和节流的函数。你可以使用其他类似的库或自己实现防抖和节流的逻辑。文章来源地址https://uudwc.com/A/R6e16