React Native：使用lodash防抖

Question

我在玩React Native和lodash的反跳。

使用以下代码只会使其工作像延迟，而不是去抖动。

<Input
 onChangeText={(text) => {
  _.debounce(()=> console.log("debouncing"), 2000)()
 }
/>

如果我输入“ foo”之类的信息，我希望控制台仅记录一次反跳操作。现在，它记录了3次“反跳”。

Answer 1

防反跳函数应该在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} />
  }
}