如何在 useEffect hook 中清理 setInterval?

在React的useEffect hook中，你可以通过返回一个清理函数的方式来清理setInterval。这是在组件卸载（unmount）时或者在依赖项数组发生变化时执行的。

下面是一个例子，演示了如何在useEffect中设置一个定时器，并在组件卸载时清理该定时器：

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

function TimerComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 创建定时器
    const intervalId = setInterval(() => {
      setCount((prevCount) => prevCount + 1); // 更新状态
    }, 1000);

    // 返回清理函数
    return () => {
      clearInterval(intervalId); // 清理定时器
    };
  }, []); // 空依赖项数组，这意味着该副作用只会在组件挂载时运行一次

  return <div>Timer: {count} seconds</div>;
}

export default TimerComponent;

在这个例子中，useEffect hook会在组件首次渲染时设置一个每秒增加计数器count的定时器。由于依赖项数组是空的（[]），因此副作用只会在组件挂载时执行一次，并且返回的清理函数会在组件卸载时调用，清理掉之前创建的定时器。这样可以防止定时器在组件不在页面上时继续运行，从而避免了可能出现的内存泄露问题。