我在玩React Native和lodash的debounce.
使用下面的代码只会让它像延迟一样工作,而不是debounce .
<Input
onChangeText={(text) => {
_.debounce(()=> console.log("debouncing"), 2000)()
}
/>
如果我输入像"foo"这样的输入,我希望控制台只记录一次go Bounce.现在它记录了3次"go 盎司".
我在玩React Native和lodash的debounce.
使用下面的代码只会让它像延迟一样工作,而不是debounce .
<Input
onChangeText={(text) => {
_.debounce(()=> console.log("debouncing"), 2000)()
}
/>
如果我输入像"foo"这样的输入,我希望控制台只记录一次go Bounce.现在它记录了3次"go 盎司".
在try 了许多不同的方法后,我发现使用"useCallback"是解决多个调用问题最简单、最有效的方法.
根据Hooks API documentation,"useCallback返回回调的一个记忆版本,只有当其中一个依赖项发生变化时才会改变."
将空数组作为依赖项传递可以确保回调只被调用一次.下面是一个简单的实现.
import React, { useCallback } from "react";
import { debounce } from "lodash";
const handler = useCallback(debounce(someFunction, 2000), []);
const onChange = (event) => {
// perform any event related action here
handler();
};
希望这有帮助!