React如何使用防抖
React 中使用防抖的方法
防抖（Debounce）是一种优化高频触发事件的技术，确保函数在最后一次调用后的一段时间内不再被触发。在 React 中，可以通过以下几种方式实现防抖。
使用 Lodash 的 debounce 函数
Lodash 提供了 debounce 函数，可以直接用于 React 组件。以下是一个示例：
import React, { useState } from 'react';
import { debounce } from 'lodash';
function SearchComponent() {
const [query, setQuery] = useState('');
const handleSearch = debounce((value) => {
console.log('Searching for:', value);
// 执行搜索逻辑
}, 500);
const handleChange = (e) => {
setQuery(e.target.value);
handleSearch(e.target.value);
};
return (
<input
type="text"
value={query}
onChange={handleChange}
placeholder="Search..."
/>
);
}
export default SearchComponent;自定义防抖 Hook
可以创建一个自定义 Hook 来实现防抖功能：
import { useState, useEffect, useRef } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
const timeoutRef = useRef();
useEffect(() => {
timeoutRef.current = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(timeoutRef.current);
};
}, [value, delay]);
return debouncedValue;
}
function SearchComponent() {
const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 500);
useEffect(() => {
if (debouncedQuery) {
console.log('Searching for:', debouncedQuery);
// 执行搜索逻辑
}
}, [debouncedQuery]);
const handleChange = (e) => {
setQuery(e.target.value);
};
return (
<input
type="text"
value={query}
onChange={handleChange}
placeholder="Search..."
/>
);
}
export default SearchComponent;使用 useCallback 和 setTimeout
通过 useCallback 和 setTimeout 结合实现防抖：
import React, { useState, useCallback } from 'react';
function SearchComponent() {
const [query, setQuery] = useState('');
const timeoutRef = React.useRef();
const handleSearch = useCallback((value) => {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
console.log('Searching for:', value);
// 执行搜索逻辑
}, 500);
}, []);
const handleChange = (e) => {
setQuery(e.target.value);
handleSearch(e.target.value);
};
return (
<input
type="text"
value={query}
onChange={handleChange}
placeholder="Search..."
/>
);
}
export default SearchComponent;注意事项
- 防抖的时间间隔（如 500ms）可以根据实际需求调整。
- 使用 Lodash 的
debounce时，注意在组件卸载时取消防抖函数，避免内存泄漏。 - 自定义 Hook 或
useCallback方法更适合在需要频繁更新状态的场景中使用。
以上方法均能有效实现防抖功能，具体选择取决于项目需求和个人偏好。
