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

Question

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. 还有一点我另起一个问题吧

Answer 1

双越 2021-06-06 22:02:30

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

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

• 提问者 起点丶 #1

  非常感谢！