如何使用Debounce Lodash React Native加快搜索速度

Question

如何使用去抖功能使搜索更快？ 目前，搜索有效，但加载速度很慢。 我想像是因为每次按下一个键就进行搜索。 我查看了其他示例，但在将其应用于自己的方案时遇到了麻烦。 我在主组件内的AutoComplete组件内的onChangeText上调用过滤方法。 由于需要传递文本im过滤，因此如何针对我的情况对此进行反跳处理。

搜索

  filterRooms = (text) => {
    const { rooms } = this.state;
    if(text && text.length > 0) {
      newSearch = rooms.filter(room => room.toLowerCase().includes(text.toLowerCase()))
  }

  // set the state
  this.setState({ rooms: newSearch, query: text, hideResults: false });

  }
}

AUTOCOMPLETE

<Autocomplete
          data={this.state.rooms}
          defaultValue={query}
          hideResults={ hideResults }
          onBlur={ () => this.setState({ hideResults: true }) }
          onFocus={ () => this.setState({ hideResults: false }) }
          onChangeText={ text => this.filterRooms(text) }
          renderItem={item => (
            <TouchableOpacity onPress={() => this.setState({ query: item })}>
              <Text>{item}</Text>
            </TouchableOpacity>
          )}
        />

Answer 1

首先，我建议使用最小字符来开始自动完成搜索。 为什么从1个字符开始？ 通常将此设置为2。

之后，你可以只是包装filterRooms与_.debounce ：

constructor(props) {
    super(props);
    this.filterRooms = _.debounce(this.filterRooms, 1000);
}
filterRooms = (text) => {
    const { rooms } = this.state;
    if(text && text.length > 0) {
        newSearch = rooms.filter(room => room.toLowerCase().includes(text.toLowerCase()))
    }
}