清除超时/间隔是否必须在 `useEffect` 反应钩子内？

Question

我想知道在使用 React 钩子时清除超时/间隔的正确方法和最佳实践是什么。例如，我有以下代码：

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

const Test = () => {
  const id = useRef(null)
  const [count, setCount] = useState(5)
  const [timesClicked, setTimesClicked] = useState(0)

  if (!count) {
    clearInterval(id.current)
  }

  useEffect(() => {
    id.current = setInterval(() => {
      setCount(count => count -1)
    }, 1000)

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

  const onClick = () => setTimesClicked(timesClicked => timesClicked + 1)

  return (
    <div>countdown: {count >= 0 ? count : 0}
      <hr />
      Clicked so far: {timesClicked}
      {count >= 0 && <button onClick={onClick}>Click</button>}
    </div>
  )
}

当count等于 0 时，Test函数体中的区间被清除。在我在互联网上看到的大多数示例中，间隔是在里面清除的useEffect，这是强制性的吗？

Answer 1

在卸载组件之前，您必须确保清除所有间隔。当组件被卸载并清除它们时，间隔永远不会自动消失，clearInterval通常在 useEffect(() => {}, []) 中调用。

在卸载组件时调用 useEffect(() => {}, []) 中返回的函数。

    return () => {
      clearInterval(id.current)
    }

通过检查此沙箱链接，您可以看到在组件内设置的间隔永远不会自动消失。https://codesandbox.io/s/cool-water-oij8s

除非clearInterval被调用，否则间隔将永远存在。