tip: 在搜索的场景中,一般都会使用防抖来限制触发请求的频率。
//示例
changeCallback(){
console.log('99999')
}
changeDebounce = debounce(this.changeCallback,1000)
render() {
return (
<TextInput
onChangeText={this.changeCallback}
/>
)
}
在函数式组件中如果这么写是有问题的
//示例
changeCallback = ()=>{
console.log('99999')
}
changeDebounce = debounce(changeCallback,1000)
return (
<TextInput
onChangeText={this.changeCallback}
/>
)
原因:函数式组件每次重新加载刷新,每次changecallback相当于函数内部声明的新的变量,所以导致debounce失效,类似的场景如 this.fn.bind(this)作为子组件的传值props传递,导致每次props都是变化的,从而使用了memo的子组件每次都会刷新,浪费性能。
所以要注意这一点,从而避开,changeCallback可以写在action文件里。而不是写在函数组件内部,作为变量每次来声明。