1. 不带第二个参数的情况
const Home = () => {
const [ count, setCount ] = useStat(0);
useEffect(() => {
console.log('界面一更新我就会执行,相当于类组件的componentDidUpdate')
})
return (
<>
<button onClick={ () => setCount(count + 1) }>点击加1</button>
</>
)
}
2.第二个参数为空数组的情况
const Home = () => {
const [ count, setCount ] = useStat(0);
useEffect(() => {
console.log('界面加载完毕我就会执行,相当于类组件的componentDidMount')
}, [])
return (
<>
<button onClick={ () => setCount(count + 1) }>点击加1</button>
</>
)
}
3.第二个参数存在指定的数据情况
const Home = () => {
const [ count, setCount ] = useStat(0);
useEffect(() => {
console.log('count数据变化我就会执行')
}, [count])
return (
<>
<button onClick={ () => setCount(count + 1) }>点击加1</button>
</>
)
}
4. 内部返回一个函数,用于清除副作用,例如定时器
const Home = () => {
const [ dateData, setDateData ] = useState(new Date().getTime());
useEffect(() => {
let time = setInterval(() => {
setDateData(new Date().getTime());
}, 1000)
return () => {
clearInterval(time);
}
}, []);
return (
<>
<p>{dateData}</p>
</>
)
}
5.使用async与await
const Home = () => {
useEffect(() => {
const fetchData = async () => {
const data = await xxx;
}
fetchData();
}, [])
return (
<>
xxx
</>
)
}