关于第三点 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
却只有一次 -
疑问:
- 这个输出结果我有点不明白 ,加上
setLoading(true)
后,为什么会这样输出? - 这里的依赖
config
是在什么阶段进行比较的?为什么 加上axios
的逻辑就会死循环? - 还有一点我另起一个问题吧
写回答
1回答
-
如课程里讲的,死循环是因为 useEffect 的第二个参数里有引用类型,和其他没关系。
你把 axios 的代码注释掉,那这个 config 就用不到了,所以也就相当于没传入 config 。所以就没有引用类型的依赖,就不会出现死循环。
012021-06-06
相似问题