Javascript 如何使用Debounce Lodash React Native加快搜索速度
如何使用debounce加快搜索速度?现在搜索工作正常,但加载速度相当慢。我想这是因为每次按下一个键它都在搜索。我查看了其他示例,但在将其应用于我自己的场景时遇到了困难。我在主组件中的AutoComplete组件中的onChangeText上调用我的filter方法。我如何在我的场景中消除这种影响,因为我需要传递文本im过滤 搜寻Javascript 如何使用Debounce Lodash React Native加快搜索速度,javascript,react-native,autocomplete,lodash,Javascript,React Native,Autocomplete,Lodash,如何使用debounce加快搜索速度?现在搜索工作正常,但加载速度相当慢。我想这是因为每次按下一个键它都在搜索。我查看了其他示例,但在将其应用于我自己的场景时遇到了困难。我在主组件中的AutoComplete组件中的onChangeText上调用我的filter方法。我如何在我的场景中消除这种影响,因为我需要传递文本im过滤 搜寻 filterRooms = (text) => { const { rooms } = this.state; if(text &&
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
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>
)}
/>
作为一个开始,我建议有一个最小字符需要开始自动完成搜索。为什么从1个字符开始?通常设置为2 之后,您只需使用以下内容包装FilterRoom:
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()))
}
}