我在玩 React Native 和 lodash 的去抖动。
使用以下代码只会让它像延迟一样工作，而不是去抖动。
<Input
onChangeText={(text) => {
_.debounce(()=> console.log("debouncing"), 2000)()
}
/>
如果我输入像“foo”这样的输入，我希望控制台只记录一次去抖动。现在它记录了 3 次“去抖动”。
React Native：使用 lodash 去抖动
IT技术
javascript
reactjs
react-native
lodash
2021-04-19 06:13:57
3个回答
Debounce 函数应该在 render 方法之外的某个地方定义，因为每次调用它时它都必须引用该函数的同一实例，因为它反对创建一个新实例，就像现在将它放入onChangeText处理函数时一样。
定义去抖动函数最常见的地方是在组件的对象上。下面是一个例子：
class MyComponent extends React.Component {
constructor() {
this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000);
}
onChangeText(text) {
console.log("debouncing");
}
render() {
return <Input onChangeText={this.onChangeTextDelayed} />
}
}
2019 年：使用“useCallback”react-hooks
在尝试了许多不同的方法后，我发现使用“useCallback”是解决多个调用问题的最简单、最有效的方法。
根据Hooks API 文档，“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();
};
希望这可以帮助！
2021 年更新
正如其他答案已经说明的那样，必须创建一次 debounce 函数引用，并通过调用相同的引用来取消相关函数（即changeTextDebounced在我的示例中）。对@George Borunov的答案的小改动应该可以解决问题。
class SomeClassComponent extends React.Component {
componentDidMount = () => {
this.changeTextDebouncer = _.debounce(this.changeTextDebounced, 500);
}
changeTextDebounced = (text) => {
console.log("debounced");
}
render = () => {
return <Input onChangeText={this.changeTextDebouncer} />;
}
}
其它你可能感兴趣的问题