componentWillUnmount() {
this.setState = (state, callback) => {
return;
};
// 清除reaction
this.reaction();
}
useEffect
使用AbortController
useEffect(() => {
let abortController = new AbortController();
// your async action is here
return () => {
abortController.abort();
}
}, []);
useRef
const isMounted = useRef(true);
useEffect(()=>{
if (isMounted.current) {
init(); //执行方法
}
return () => {isMounted.current = false;};
}, []);
setTimeout
useEffect(() => {
const interval = setTimeout(() => {
}, 10);
return () => {
clearTimeout(interval);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
建议了解相关知识:定时器,事件循环。
设置定时器1000ms后,定时器里的函数会被加入到宏任务队列里,并执行。此时,设置的只执行一次的定时器已经生效过了,清除定时器没有意义。
timer的值为定时器的序号,只有手动赋值为null,才会变为null。
清除定时器要在定时器触发前调用才有意义
DOM 官网
解决内存泄漏