关于第三点 useEffect 里会无限循环,有些疑问

来源:14-16 Hooks使用中的几个注意事项

起点丶

2021-06-06

function useAxios(url, config = {}) {
  console.log('useAxios...')
  const [loading, setLoading] = useState(false)
  const [data, setDate] = useState()
  const [error, setError] = useState()
  useEffect(() => {
    console.log('useAxios...useEffect')
    setLoading(true)
    // axios(url)
    //   .then(res => setDate(res))
    //   .catch(err => setError(err))
    //   .finally(() => setLoading(false))
    // return () => {}
  }, [url, config]) 

  return {
    loading,
    data,
    error,
  }
}

图片描述

  • 现象:上边的代码,我把 axios 的相关代码注释掉之,只留一个 setLoading(true),就不会出现死循环。看输出 re-render 好像 re-render 了两次,但是进入 useEffect 却只有一次

  • 疑问:

  1. 这个输出结果我有点不明白 ,加上 setLoading(true) 后,为什么会这样输出?
  2. 这里的依赖 config 是在什么阶段进行比较的?为什么 加上 axios 的逻辑就会死循环?
  3. 还有一点我另起一个问题吧
写回答

1回答

双越

2021-06-06

如课程里讲的,死循环是因为 useEffect 的第二个参数里有引用类型,和其他没关系。

你把 axios 的代码注释掉,那这个 config 就用不到了,所以也就相当于没传入 config 。所以就没有引用类型的依赖,就不会出现死循环。


0
1
起点丶
非常感谢!
2021-06-06
共1条回复

前端框架及项目面试 聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4695 学习 · 1667 问题

查看课程