javascript - clearInterval() 在 React Native 功能组件中不起作用

Question

我有一个具有 getPosition() 的屏幕组件每隔一段时间调用一次的函数。

如果 stopRace()函数被调用，或者如果用户按下物理/图形后退按钮，我想清除这个间隔，这样它就不会继续在后台运行。

为此，我尝试将间隔 ID 存储在 raceUpdateInterval 中。状态变量。

然后我使用 clearInterval(raceUpdateInterval) 清除此间隔在 stopRace()函数和 cleanup()功能。

当我调用 stopRace()功能，然后按返回，间隔被清除。我知道这一点是因为我的控制台日志:

Still Running
Still Running
Still Running
Reached cleanup function

但是，如果我按下后退按钮，则间隔不会清除。相反，我的控制台记录:

Still Running
Still Running
Still Running
Reached cleanup function
Still Running

随后是包含以下建议的内存泄漏警告:

To fix, cancel all subscriptions and asynchronous tasks in %s.%s, a useEffect cleanup function

这正是我想要做的，但由于某种超出我理解的原因无法正常工作。

以下是该组件的相关代码:

const RaceScreen = ({route, navigation}) => {

    const [raceUpdateInterval, setRaceUpdateInterval] = useState(0);

    useEffect(function() {
        return function cleanup() {
            console.log('Reached cleanup function')
            clearInterval(raceUpdateInterval)
        }
      }, []);

    function getPosition(){
        console.log("Still being called")
        //get position
    }

    function startRace(){
        setRaceUpdateInterval(setInterval(getPosition, 1000))
    }

    function stopRace(){
        clearInterval(raceUpdateInterval)
    }

为什么 stopRace()函数正确清除间隔，但 cleanup()功能不行吗？

Answer 1

您的代码可能无法正常工作的部分原因是，如果您运行 startRace函数不止一次，中间不停止，间隔会重新开始，但间隔 ID 会丢失。

未能清除的主要原因是，当使用 [] 作为依赖数组的 useEffect 看到时，它在开始时看到的 raceUpdateInterval 是:0 .它没有看到更新值的原因是因为 useEffect 在它运行(和重新运行)的点创建了一个闭包。所以你需要使用一个引用来让它访问最新版本的 raceUpdateInterval

这是我将如何修改您的代码以使其正常工作的方法。不要在函数中启动计时器，而是使用 useEffect以这种方式启动该副作用将永远不会出现计时器无法清理的情况。

我使用 ref 将函数添加到区间，因为我不知道 getPosition 函数中有多少个闭包变量。这样， positionFunctRef.current 总是指向函数的最新版本，而不是保持静态。

const RaceScreen = ({ route, navigation }) => {
  const [runningTimer, setRunningTimer] = useState(false);
  function getPosition() {
    console.log('Still being called');
    //get position
  }
  const positionFunctRef = useRef(getPosition);
  useEffect(() => {
    positionFunctRef.current = positionFunctRef;
  });

  useEffect(
    function () {
      if (!runningTimer) {
        return;
      }

      const intervalId = setInterval(() => {
        positionFunctRef.current();
      }, 1000);
      return () => {
        console.log('Reached cleanup function');
        clearInterval(intervalId);
      };
    },
    [runningTimer]
  );

  function startRace() {
    setRunningTimer(true);
  }

  function stopRace() {
    setRunningTimer(false);
  }
};