看到在第一次输入事件时发生重大延迟，并以反跳的方式触发了React / redux中的事件处理程序

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

因此，我发现此问题与Task.Run()有关。简而言之，我在渲染中定义了几个不同的组件来计算值。简单修复，不要那样做。另外，事实证明，我的列表视图中的呈现工具提示对性能产生了巨大的影响。