React 防抖与节流用法

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

1. 防抖（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毫秒后，才会执行真正的搜索逻辑。

2. 节流（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库来提供防抖和节流的函数。你可以使用其他类似的库或自己实现防抖和节流的逻辑。