useEffect呢,只能返回一个函数,用于清除副作用(返回一个值会报错喔“destroy is not a function”),执行时机呢有两个:
第一个是组件卸载时(从DOM上移除)
第二是下一次 useEffect 执行之前(当依赖项发生变化,导致 useEffect 的回调函数被重新调用之前,上一次注册的清除函数会被先调用,以确保旧的副作用被清理),示例代码如下
import {useEffect,useState} from 'react'
export default function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count: ${count}`);
return () => {
console.log('Cleanup previous effect'+count);
};
}, [count]);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={incrementCount}>Increment</button>
</div>
);
}