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

Question

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

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

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

还有只执行一次的时候：

// 法21
const getReportCountReq = getReportCount

useEffect(getReportCountReq, [])

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

Answer 1

可以先清楚几个概念，

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

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

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

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

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

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