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

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