React Hooks 使用 setInterval 时，程序员容易陷入的坑

前端

2024-01-10 08:23:58

React Hooks 是一个用于函数组件的状态管理解决方案，它允许我们在函数组件中使用状态和生命周期方法。这使得函数组件更具可重用性和可测试性。

setInterval 是一个 JavaScript 内置函数，用于定期执行指定的代码。它接受两个参数：一个函数和一个间隔时间。函数将在指定的间隔时间后执行。

在 React Hooks 中使用 setInterval 时，我们可能会遇到以下问题：

组件卸载后，setInterval 仍然会继续执行。
setInterval 的执行时间不准确。
setInterval 会导致内存泄漏。

这些问题都是由 React 编程模型和 setInterval 的不匹配导致的。React 编程模型是基于组件生命周期的，而 setInterval 是基于时间的。这两种模型的不匹配导致了上述问题。

为了解决这些问题，我们可以使用以下解决方案：

使用 useEffect 清理 setInterval。
使用 useRef 来存储 setInterval 的返回值。
使用 useCallback 来包装 setInterval 的回调函数。

通过使用这些解决方案，我们可以轻松地在 React Hooks 中使用 setInterval，而不用担心上述问题。

让我们通过一个例子来看看如何使用这些解决方案。以下是一个使用 React Hooks 实现倒计时的组件：

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

const Countdown = () => {
  const [timeLeft, setTimeLeft] = useState(10);
  const timerRef = useRef(null);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setTimeLeft((prevTimeLeft) => prevTimeLeft - 1);
    }, 1000);

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

  return (
    <div>
      <h1>Time left: {timeLeft}</h1>
    </div>
  );
};

export default Countdown;