1. 模拟生命周期
1.1 仅初始化执行,模拟 componentDidMount
依赖空数组,由于依赖为空,不会变化,只执行一次
useEffect(() => {
console.log('hello world')
}, [])
1.2 仅更新执行,模拟 componentDidUpdate
依赖为具体变量,每次变量变化,都执行一次
useEffect(() => {
console.log('info: ', name, age)
}, [name, age])
1.3 初始化和更新都执行,模拟 componentDidMount 和 componentDidUpdate
没有依赖,与依赖为空不同,这个每次都会执行
useEffect(() => {
console.log('every time')
})
1.4 卸载执行,模拟 componentWillUnmount
在useEffect中返回一个函数,则在组件卸载时,会执行该函数
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);
2. 执行async函数
useEffect的回调函数,不能是async,可以将async写在回调里面,单独调用
//不可以
useEffect(async()=>{
const res = await fetchData(id)
setData(res.data)
},[id])
//推荐
useEffect(()=>{
const getData = async() => {
const res = await fetchData(id)
setData(res.data)
}
getData()
},[id])
3. useEffect执行顺序
useEffect的执行时机,是在react的commit阶段之后。
当父子组件都有useEffect,则先执行子组件的useEffect,再执行父组件的useEffect
原文地址:useEffect用法总结