清除 timeout/interval 是否必须在 `useEffect` 反应挂钩内？

Question

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

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函数体中被清除。我在网上看到的大部分例子里interval都是在useEffect里面清空的，这个是强制的吗？

Answer 1

setInterval是一个function重复执行，return是一个id的区间。当您使用此 ID 调用 clearInterval 时，您会阻止 function 重复。在某个 function 中不强制执行它，当您不再希望随后调用 function 时，您需要清除它。你可以在 function 你 return 作为 useEffect 的结果调用它，如果这是你需要的话。

Answer 2

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

内部调用 clearInterval

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

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

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

间隔永远保持，除非调用 clearInterval。

清除 timeout/interval 是否必须在 `useEffect` 反应挂钩内？

Does clearing timeout/interval have to be inside `useEffect` react hook?

reactjs

settimeout

setinterval

react-hooks

use-effect