react销毁组件如何清除定时器
清除定时器的基本方法
在React组件销毁时，必须手动清除定时器以避免内存泄漏。通常在组件的componentWillUnmount生命周期方法（类组件）或useEffect的清理函数（函数组件）中执行清除操作。
类组件示例：
componentDidMount() {
this.timerID = setInterval(() => {
// 执行操作
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}函数组件示例：
useEffect(() => {
const timerID = setInterval(() => {
// 执行操作
}, 1000);
return () => {
clearInterval(timerID);
};
}, []);处理多个定时器的情况
当组件中存在多个定时器时，建议使用数组或对象来存储定时器ID，并在卸载时统一清理。
useEffect(() => {
const timers = [];
timers.push(setInterval(/* ... */));
timers.push(setTimeout(/* ... */));
return () => {
timers.forEach(timerID => {
clearInterval(timerID);
clearTimeout(timerID);
});
};
}, []);使用自定义Hook封装
为提升代码复用性，可以创建自定义Hook管理定时器：
function useInterval(callback, delay) {
const savedCallback = useRef();
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}注意事项
确保定时器ID的存储位置不会被React的重渲染影响。使用useRef（函数组件）或实例属性（类组件）存储定时器ID是最佳实践。
避免在渲染逻辑中直接创建定时器，这可能导致每次渲染都创建新定时器。应该将定时器初始化放在useEffect或生命周期方法中。
