React 实现计时器

此处我主要用了Material-UI组件库

安装

yarn add @mui/material @emotion/react @emotion/styled

实现 

import React, { useRef } from "react"
import Button from "@mui/material/Button"
import Box from "@mui/material/Box"
import Divider from "@mui/material/Divider"
import Chip from "@mui/material/Chip"
export default function Time() {
const [startTime, setStartTime] = useState(null)
const [now, setNow] = useState(null)
const refs = useRef(null)
var secondsPassed = 0
if (startTime != null && now != null) {
secondsPassed = (now - startTime) / 1000
}
function handleStart() {
setStartTime(Date.now())
setNow(Date.now())
clearInterval(refs.current)
refs.current = setInterval(() => {
setNow(Date.now())
}, 10)
}
function handleStop() {
clearInterval(refs.current)
}
return (
<div>
<Divider>
<Chip label="useRef" />
</Divider>
<Box sx={{ width: "500px", marginTop: "10px", marginBottom: "10px" }}>
<h1>Time:{secondsPassed.toFixed(3)}</h1>
<Button variant="outlined" color="success" onClick={handleStart}>
start
</Button>
<Button variant="outlined" color="error" onClick={handleStop}>
stop
</Button>
</Box>
</div>
)
}

最后

以上就是有魅力铅笔为你收集整理的React 实现计时器的全部内容，希望文章能够帮你解决React 实现计时器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。