react-hook中依赖一个变量时，下面这两种写法的区别是什么？

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

// 写法一
const getReportCountReq = useCallback(() => {
    getReportCount({
        params: {
            date
        }
    }) 
}, [date])

useEffect(() => { getReportCountReq() }, [])

// 写法二
useEffect(() => { 
    getReportCount({
        params: {
            date
        }
    }) 
}, [date])

还有只执行一次的时候：

// 法21
const getReportCountReq = getReportCount

useEffect(getReportCountReq, [])

// 法22
useEffect(() => { 
    getReportCount() 
}, [])

###

可以先清楚几个概念，

当useEffect 的依赖数组为空的，类似 componentDidMount 整个生命周期只执行一次
useCallback 用来缓存一个函数，保证组件在重渲染的时候方法的引用不会改变
当hook的依赖列表值被改变时，hook将会重新执行内部的回调函数

了解概念之后，我们就可以解读 “写法一”和“写法二”的区别：

从执行的角度，区别是“写法一” 只会执行一次；“写法二”，当date改变时，就会重新执行。
从hook规则，如果开启了eslint，“写法一” 是会警告的，不符合hook的规则，没有在依赖列表写上方法依赖

useEffect(() => { getReportCountReq() }, [getReportCountReq])

最近刚好写到了一篇关于react内置hook的解读，有兴趣可以看看~

https://mp.weixin.qq.com/s/Ws...