React useEffect 定时器的使用React useEffect中定时器最佳使用方式 import 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'))