函数式组件中防抖函数的使用注意

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文件里。而不是写在函数组件内部，作为变量每次来声明。

函数式组件中防抖函数的使用注意

原文：https://www.cnblogs.com/hjj2ldq/p/13025009.html