一个关于react hook计时器的问题

在react hook中使用定时器的时候遇到了一个这样的问题
这样使用计时器的话会出现一个结果，n永远是2，因为定时器中的上下文指向的一直是定义n初始值为1的时刻。

const [n, setN] = useState(1)

<button onClick={() => {
        setN(1)
        time = setInterval(() => {
          setN(n + 1)
          console.log(n)
        }, 1000)
      }}>
        点击
      </button>

因此我们要在每一次更新数据的时候清除掉这个计时器并重新定义这个计时器，如下：

const [n, setN] = useState(1)
  useEffect(() => {
    if (n < 10) {
      time = setInterval(() => {
        setN(n + 1)
        console.log(n)
      }, 1000)
    }
    return () => {
      clearInterval(time)
    }
  })

通过视图更新触发的useEffect来进行定时器的重新定义和清除，特别要注意react的当前时刻的上下文这样在开发react的时候能避免踩很多坑。
过年的第一篇博客！！！