web-dev-qa-db-ja.com

React Native：lodashデバウンスの使用

私はReact Nativeとlodashのデバウンスで遊んでいます。

次のコードを使用すると、遅延のように機能するだけでデバウンスは機能しません。

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

「foo」などの入力を入力した場合、コンソールでデバウンスを1回だけ記録するようにします。現在、「デバウンス」を3回記録しています。

javascriptreactjsreact-nativelodash
15
Norfeldt

デバウンス関数は、onChangeTextに入れたときに発生するような新しいインスタンスの作成とは反対に、呼び出すたびに関数の同じインスタンスを参照する必要があるため、renderメソッドの外部のどこかで定義する必要があります。ハンドラー関数。

デバウンス関数を定義する最も一般的な場所は、コンポーネントのオブジェクト上です。以下に例を示します。

class MyComponent extends React.Component {
  constructor() {
    this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000);
  }

  onChangeText(text) {
    console.log("debouncing");
  }

  render() {
    return <Input onChangeText={this.onChangeTextDelayed} />
  }
}
55
George Borunov