[React]useEffect中return函数执行时机
已知在组件卸载时会执行return函数,其实在依赖项变更时也会执行。
import { useEffect, useState } from 'react';
export default function HomePage() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('effect', count);
return () => {
console.log('effect 清理', count);
}
}, [count])
return (
<div>
<button
onClick={() => setCount(pre => pre + 1)}
>count + 1</button>
</div>
);
}
点击按钮执行结果:
effect 0 //初始化
effect 清理 0 //第一次点击
effect 1 //第一次点击
effect 清理 1 //第二次点击
effect 2 //第二次点击