React Native:使用lodash debounce

Question

我正在玩React Native和lodash的辩护.

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

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

如果我输入像"foo"这样的输入,我希望控制台只记录一次debounce.现在它记录"debounce"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} />
  }
}

Answer 2

2019 年：使用“useCallback”反应钩子

在尝试了许多不同的方法之后，我发现使用“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();
 };

希望这可以帮助！

Answer 3

正如其他答案已经指出的，去抖函数引用必须创建一次，并通过调用相同的引用来谴责相关函数（即changeTextDebounced在我的示例中）。

首先要导入的东西

import {debounce} from 'lodash';

对于类组件

class SomeClassComponent extends React.Component {
  componentDidMount = () => {
    this.changeTextDebouncer = debounce(this.changeTextDebounced, 500);
  }

  changeTextDebounced = (text) => {
    console.log("debounced");
  }

  render = () => {
    return <Input onChangeText={this.changeTextDebouncer} />;
  }
}

对于功能组件

const SomeFnComponent = () => {
  const changeTextDebouncer = useCallback(debounce(changeTextDebounced, 500), []);

  const changeTextDebounced = (text) => {
    console.log("debounced");
  }

  return <Input onChangeText={changeTextDebouncer} />;
}