在 React/redux 中看到第一次打字事件被触发到事件处理程序时有明显的延迟，并带有 debounce

Question

我的最终目标是有一个搜索过滤器框，它可以调用 API 来更新 ListView 项。当用户开始输入时，我想立即分派一个事件以在 ListView 项之上显示一个加载程序，并使用组件状态实时更新搜索过滤器中的文本（我认为）。然后我想要一个去抖动的调度，它可以进行 API 调用，更新商店中的项目和状态。

这是我的搜索组件的基础知识：

class Filters extends React.PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      search: this.props.filters.search,
    }

    this.onSearchChange = this.onSearchChange.bind(this)
    this.handleSearchDebounced = _.debounce(function() {
      console.log('handleSearchDebounced')
      // this.props.onSearchFilterChange.apply(this, [this.state.search])
    }, 250)
  }
  onSearchChange(e) {
    console.log('onSearchChange')
    this.setState({ search: e.target.value })
    // simple dispatch that shows the loader
    this.props.startLoading()
    this.handleSearchDebounced()
  }
  render() {
    const {
      filters,
      onSearchFilterChange,
    } = this.props
    console.log('filters is re-rendering')
    return (
      <FiltersContainer>
        <input
          placeholder="Search"
          value={this.state.search}
          onChange={this.onSearchChange}
        />
      </FiltersContainer>
    )
  }
}

这就是问题所在，我第一次在搜索框中输入内容时，即使没有 API 调用等，我也无法与屏幕交互，但会出现大约 2 秒的延迟。如果我删除dispatch 来显示加载程序，而不是更新正常。同样有趣的是，在第一个滞后的搜索框（使用 dispatch）之后，每个后续的搜索框输入都可以正常工作。从我的控制台日志来看，去抖似乎工作正常。

我还附上了分析器，它显示了第一次和随后的打字事件之间的巨大差异。

对此有什么想法吗？

Answer 1

检查你的代码我发现了一个错误。您正在以可变方式更新状态，而应该以不可变方式更新状态。

您直接将 this.props.filters.search 设置为错误的状态，可能会导致问题。例如，您应该在 componentDidMount 生命周期挂钩中更新它。

this.state = {
  search: '',
}
componentDidMount(){
  this.setState({ search: this.props.filters.search });
}

Answer 2

所以我发现问题与 React.PureComponent 有关。很简单，我只是在不同组件的渲染中定义了几个简单的函数来计算值。容易修复，不要那样做。此外，事实证明，在我的列表视图中呈现工具提示对性能有巨大影响。

在 React/redux 中看到第一次打字事件被触发到事件处理程序时有明显的延迟，并带有 debounce

Seeing a significant delay on first typing event fired to event handler in React/redux with debounce

javascript

reactjs

redux

redux-thunk