React使用clearInterval和clearTimeout超时判断组件是否已销毁的简单方法

2022-05-16

React开发应用中，会经常使用clearInterval和clearTimeout做一些异步任务，严格上讲，每次都需要判断组件是否已销毁。

以clearTimeout为例，一种简单的方法就是用钩子useEffect，在组件销毁后自动清除定时器。

定时器相关内容定义在组件外部，每次执行最好也手动清除下。

react_logo

示例代码：

import React, { useEffect } from 'react';

let timer = null;

const clearTimer = e => {
	timer && clearTimeout(timer);
	timer = null;
}

export default function Empty(props) {

	const onClick = e => {
		clearTimer();
		timer = setTimeout( () => {
			alert('组件仍存在！');
		}, 3000);
	}

	useEffect(() => {
		return () => {
			clearTimer();
		}
	}, []);

    return (
    	<>
    		<div onClick={onClick}>
				触发事件
    		</div>
		</>
    )
}

其中，useEffect监听空数组变化，本质就是初始化时调用一次，return 方法处理组件销毁后的逻辑。

示例中点击事件，三秒后弹出警告框，如果定时器不存在，自然就不会触发事件了。

	useEffect(() => {
		return () => {
			clearTimer();
		}
	}, []);

clearInterval同理，方法不唯一，仅供参考。

（版权归cpury.com所有，转载请注明出处。）

WEB开发