我正在尝试在功能组件中使用该throttle方法lodash，例如：
const App = () => {
const [value, setValue] = useState(0)
useEffect(throttle(() => console.log(value), 1000), [value])
return (
<button onClick={() => setValue(value + 1)}>{value}</button>
)
}
由于内部方法useEffect在每次渲染时重新声明，因此节流效果不起作用。
有没有人有一个简单的解决方案？
经过一段时间后，我确信自己处理事情setTimeout/clearTimeout（并将其移动到单独的自定义钩子中）比使用功能助手要容易得多。稍后处理会在我们将其应用到useCallback可以由于依赖项更改而重新创建但我们不想重置延迟运行之后立即产生额外的挑战。
下面的原始答案
您可能（并且可能需要）useRef在渲染之间存储值。就像建议计时器一样
类似的东西
const App = () => {
const [value, setValue] = useState(0)
const throttled = useRef(throttle((newValue) => console.log(newValue), 1000))
useEffect(() => throttled.current(value), [value])
return (
<button onClick={() => setValue(value + 1)}>{value}</button>
)
}
至于useCallback：
它也可以作为
const throttled = useCallback(throttle(newValue => console.log(newValue), 1000), []);
但是如果我们尝试重新创建回调一次value：
const throttled = useCallback(throttle(() => console.log(value), 1000), [value]);
我们可能会发现它不会延迟执行：一旦value被更改，回调会立即重新创建并执行。
所以我看到useCallback在延迟运行的情况下不会提供显着的优势。由你决定。
[UPD] 最初是
const throttled = useRef(throttle(() => console.log(value), 1000))
useEffect(throttled.current, [value])
但这种方式通过关闭throttled.current绑定到初始value（0）。所以即使在下一次渲染中它也从未改变。
useRef由于闭包特性，因此在将函数推入时要小心。
我创建了自己的自定义钩子useDebouncedEffect，该钩子将等待执行useEffect直到状态在延迟期间没有更新。
在此示例中，您停止单击按钮 1 秒钟后，您的效果将记录到控制台。
沙盒示例 https://codesandbox.io/s/react-use-debounced-effect-6jppw
App.jsximport { useState } from "react";
import { useDebouncedEffect } from "./useDebouncedEffect";
const App = () => {
const [value, setValue] = useState(0)
useDebouncedEffect(() => console.log(value), [value], 1000);
return (
<button onClick={() => setValue(value + 1)}>{value}</button>
)
}
export default App;
useDebouncedEffect.jsimport { useEffect } from "react";
export const useDebouncedEffect = (effect, deps, delay) => {
useEffect(() => {
const handler = setTimeout(() => effect(), delay);
return () => clearTimeout(handler);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [...deps || [], delay]);
}
除非您想看到警告，否则禁用详尽的 deps 的注释是必需的，因为 lint 总是会抱怨没有作为依赖项的效果。添加 effect 作为依赖项将在每次渲染时触发 useEffect。相反，您可以添加检查以useDebouncedEffect确保它已通过所有依赖项。（见下文）
将详尽的依赖项检查添加到 useDebouncedEffect
如果你想让 eslint 检查useDebouncedEffect详尽的依赖关系，你可以将它添加到 eslint 配置中package.json
"eslintConfig": {
"extends": [
"react-app"
],
"rules": {
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "useDebouncedEffect"
}]
}
},
useThrottle , useDebounceconst App = () => {
const [value, setValue] = useState(0);
// called at most once per second (same API with useDebounce)
const throttledCb = useThrottle(() => console.log(value), 1000);
// usage with useEffect: invoke throttledCb on value change
useEffect(throttledCb, [value]);
// usage as event handler
<button onClick={throttledCb}>log value</button>
// ... other render code
};
useThrottle（洛达什）import _ from "lodash"
function useThrottle(cb, delay) {
const options = { leading: true, trailing: false }; // add custom lodash options
const cbRef = useRef(cb);
// use mutable ref to make useCallback/throttle not depend on `cb` dep
useEffect(() => { cbRef.current = cb; });
return useCallback(
_.throttle((...args) => cbRef.current(...args), delay, options),
[delay]
);
}
useDebounce（洛达什）import _ from "lodash"
function useDebounce(cb, delay) {
// ...
const inputsRef = useRef({cb, delay}); // mutable ref like with useThrottle
useEffect(() => { inputsRef.current = { cb, delay }; }); //also track cur. delay
return useCallback(
_.debounce((...args) => {
// Debounce is an async callback. Cancel it, if in the meanwhile
// (1) component has been unmounted (see isMounted in snippet)
// (2) delay has changed
if (inputsRef.current.delay === delay && isMounted())
inputsRef.current.cb(...args);
}, delay, options
),
[delay, _.debounce]
);
}
1. 你可以用你自己的throttle或debounce代码替换 Lodash ，比如：
2.useThrottle可以缩短，如果总是与useEffect（相同的useDebounce）使用：
const App = () => {
// useEffect now is contained inside useThrottle
useThrottle(() => console.log(value), 1000, [value]);
// ...
};
它可能是一个很小的自定义钩子，如下所示：
useDebounce.js
import React, { useState, useEffect } from 'react';
export default (value, timeout) => {
const [state, setState] = useState(value);
useEffect(() => {
const handler = setTimeout(() => setState(value), timeout);
return () => clearTimeout(handler);
}, [value, timeout]);
return state;
}
用法示例：
import React, { useEffect } from 'react';
import useDebounce from '/path/to/useDebounce';
const App = (props) => {
const [state, setState] = useState({title: ''});
const debouncedTitle = useDebounce(state.title, 1000);
useEffect(() => {
// do whatever you want with state.title/debouncedTitle
}, [debouncedTitle]);
return (
// ...
);
}
// ...
注意：您可能知道，useEffect始终在初始渲染上运行，因此如果您使用我的答案，您可能会看到组件的渲染运行两次，别担心，您只需要编写另一个自定义钩子。查看我的其他答案以获取更多信息。
在 useCallback 钩子的帮助下去抖动。
import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';
function App() {
const [value, setValue] = useState('');
const [dbValue, saveToDb] = useState(''); // would be an API call normally
// highlight-starts
const debouncedSave = useCallback(
debounce(nextValue => saveToDb(nextValue), 1000),
[], // will be created only once initially
);
// highlight-ends
const handleChange = event => {
const { value: nextValue } = event.target;
setValue(nextValue);
// Even though handleChange is created on each render and executed
// it references the same debouncedSave that was created initially
debouncedSave(nextValue);
};
return <div></div>;
}