我正在 React 中创建一个自定义 Hook ,它为一组给定的事件设置一个事件监听器。存在一组默认事件,并且此自定义 Hook 的使用者不应在大多数用例中自定义这些事件。通常,我希望在安装组件时添加事件监听器,并在卸载组件时将其删除。然而,坚持钩子(Hook)的原则(和 eslint(react-hooks/exhaustive-deps)
lint 规则),我希望优雅地处理要监视的事件列表的更改。使用 React hooks 实现此目的最惯用的方法是什么?
假设我只想删除所有事件监听器并在事件列表更改时重新添加它们,我可以尝试以下操作:
const useEventWatcher = (
interval = 5000,
events = ['mousemove', 'keydown', 'wheel']
) => {
const timerIdRef = useRef();
useEffect(() => {
const resetInterval = () => {
if (timerIdRef.current) {
clearInterval(timerIdRef.current);
}
timerIdRef.current = setInterval(() => {
console.log(`${interval} milliseconds passed with no ${events.join(', ')} events!`);
}, interval)
};
events.forEach(event => window.addEventListener(event, resetInterval));
// Don't want to miss the first time the interval passes without
// the given events triggering (cannot run the effect after every render due to this!)
resetInterval();
return () => {
events.forEach(event => window.removeEventListener(event, resetInterval));
};
}, [events, interval]);
}
不幸的是,这不会按预期运行。请注意,我想为 events
参数提供默认值。使用当前方法执行此操作意味着 events
每次自定义 Hook 运行时都指向不同的引用,这意味着效果每次都会运行(由于浅依赖性比较)。理想情况下,我想要一种使效果取决于数组内容而不是引用的方法。实现这一目标的最佳方式是什么?
最佳答案
您可以在两个不同的 useEffects
中分离两个副作用。
您可以在加载时的第一个 useEffect
中运行初始的 resetInterval
。
您需要运行一次,并且您可能会使用 []
的依赖项。
但是,您需要在 useEffect
之外提取 resetInterval
。
另一个问题是,现在 resetInterval
在每次渲染时都会重新创建。
所以你可以将它包装在 useCallback
中。
第一个 useEffect
依赖于 resetInterval
(这导致 useEffect
在加载时运行一次,因此将调用 resetInterval
)
现在您可以订阅第二个 useEffect
中的所有 events
并依赖于 [events, interval, resetInterval]
“eslint(react-hooks/exhaustive-deps) lint 规则”。
结果如下 &
您可以在 CodeSandbox 上查看工作演示。
const useEventWatcher = (
interval = 2000,
events = ["mousemove", "keydown", "wheel"]
) => {
const timerIdRef = useRef();
const resetInterval = useCallback(() => {
if (timerIdRef.current) {
clearInterval(timerIdRef.current);
}
timerIdRef.current = setInterval(() => {
console.log(
`${interval} seconds passed with no ${events.join(", ")} events!`
);
}, interval);
}, [events, interval]);
useEffect(() => {
resetInterval();
}, [resetInterval]);
useEffect(() => {
events.forEach(event => window.addEventListener(event, resetInterval));
return () => {
events.forEach(event => window.removeEventListener(event, resetInterval));
};
}, [events, interval, resetInterval]);
};
查看工作页面(出于演示目的,我将间隔设置为 2 秒)
当您四处移动鼠标、滚动滚轮或按键时,控制台日志不会出现。一旦未触发这些事件,您将看到控制台日志消息。
关于reactjs - react Hook : Idiomatic way to ensure that useEffect runs only when the contents of an array argument to the custom hook change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57227862/
相关文章:
css - 自托管字体在 Gatsby 和 Safari 中不起作用
google-cloud-functions - Firebase 日志错误 FAILED_PREC
javascript - 我可以使用 jQuery globaleval 而不是 eval 来逃避内
macos - 错误 : command 'gcc' failed with exit status
caching - Shopify 缓存 - 哪些操作导致清除缓存
python - 导入 pycurl : Library not loaded: @rpath/li
python - 如何在 Django 的运行服务器中进行事后调试?
node.js - 当调用 Axios GET 并且 express 服务器发送 .json() 时