页签关闭时不调用useEffect清理函数

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数
  };
}, [依赖数组]);

const [key, setKey] = useState(0);

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数
  };
}, [key]);

// 当页签关闭时，更新 key
const handleTabClose = () => {
  setKey(prevKey => prevKey + 1);
};

const cleanup = useRef(null);

useEffect(() => {
  // 副作用代码
  cleanup.current = () => {
    // 清理函数
  };
  return () => {
    if (cleanup.current) {
      cleanup.current();
    }
  };
}, []);

// 当页签关闭时，手动调用清理函数
const handleTabClose = () => {
  if (cleanup.current) {
    cleanup.current();
  }
};

useLayoutEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数
  };
}, []);

import React, { useState, useEffect, useRef } from 'react';

function TimerComponent() {
  const [time, setTime] = useState(0);
  const timerId = useRef(null);

  useEffect(() => {
    timerId.current = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => {
      clearInterval(timerId.current);
    };
  }, []);

  const handleTabClose = () => {
    clearInterval(timerId.current);
  };

  return (
    <div>
      <p>Time: {time} seconds</p>
      <button onClick={handleTabClose}>Close Tab</button>
    </div>
  );
}

export default TimerComponent;