React通过useEffect使用定时器

本文讲解了React中如何定义、使用以及销毁定时器

---

使用场景：页面刷新数据，页面获取当前时间等

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
 
const Test = () => {
  console.log('render')
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('开启定时器')
    const timer = setInterval(() => {
      console.log('进入定时器')
      // 注:在setCount中使用箭头函数是最好方式之一,只有一个timer生成
      setCount((count) => count + 1) 
    }, 2000)
    return () => {
      console.log('清除定时器')
      clearInterval(timer)
    }
  }, []) //如果设置count依赖,会有多个timer生成,销毁
  return (
    <div>
      <span>{count}</span>
    </div>
  )
}
 
ReactDOM.render(<App />, document.getElementById('root'))

注意：如果切换到其他页面，不清除定时器的时候控制台会出现报错，翻译过来就是“无法对已卸载的组件执行反应状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。若要修复，请取消useffect清除函数中的所有订阅和异步任务。在time这个组件”

所以各位销毁组件时千万要把定时器一起清除掉，否则容易出现一些奇奇怪怪的错误！