Rxjs在使用主题的React文本输入组件上进行反跳不会在无状态/功能组件上批量输入文本

debugcn 发表于 Dev

SinSync

我试图更深入地研究rxjs并发现一个问题，在该问题中，我试图消除抖动的输入字段在每次按键时都会调度一个事件，该消除抖动仅保存输出，但会导致像这样的树：

a
as(delay - waits 200ms, then fires the rest synchronously)
asd
asdf
asdfg 
....

相同的代码可以在类组件中正常工作（https://stackoverflow.com/a/44300853/1356046），但无法理解为什么它不适用于无状态组件。这是一个示例：https ://stackblitz.com/edit/react-hzhrmf-您可以看到每次击键都会触发useState更新。

非常感谢。

博恩

React不断调用您的函数来渲染组件。因此，主题不断被创建。

使用带有useState的工厂来保留主题，并使用useEffect来确保仅进行一次订阅应该可以解决您的问题。

像这样的东西：

import React, { Component, useState, useEffect, useRef } from 'react';
import { render } from 'react-dom';
import { debounceTime, map, tap, distinctUntilChanged } from 'rxjs/operators';
import { fromEvent, Subject } from 'rxjs';

import './style.css';
const App = props => {
  const [queryName, setQueryName] = useState("");
  const [debouncedName, setDebouncedName] = useState("");
  const [onSearch$] = useState(()=>new Subject());
  useEffect(() => {
    const subscription = onSearch$.pipe(
      debounceTime(400),
      distinctUntilChanged(),
      tap(a => console.log(a))
    ).subscribe(setDebouncedName);
  }, [])
  const handleSearch = e => {
    setQueryName(e.target.value);
    onSearch$.next(e.target.value);
  };

  return (
    <div>
      <input
        placeholder="Search Tags"
        value={queryName}
        onChange={handleSearch}
      />
      <p>Debounced: {debouncedName}</p>
    </div>
  );
}

render(<App />, document.getElementById('root'));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。