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'))
React hooks之useEffect 定时器的使用
最新推荐文章于 2024-07-27 09:09:30 发布
本文介绍了如何在React中使用useState和useEffect创建一个计数器组件,通过定时器实现每2秒加一,并确保仅有一个定时器实例。重点展示了箭头函数在setState中的应用和清理定时器的方法。
摘要由CSDN通过智能技术生成