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 = 0if (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 Native 后台执行计时器react-native-background-timer
在开发的过程中,定时执行代码很常用,但是有个问题是,只要手机APP切到后台运行代码就停止执行了.最近在开发一款音乐播放器APP,想实现定时"停止播放"功能,就需要用到后台也可以定时 ...
Taro(React)实现具有滚动效果的倒数计时器
Taro(React)实现具有滚动效果的倒数计时器 Taro获取节点方法的封装 import Taro from "@tarojs/taro"; import { NodesRef ...
React入门学习小案例之番茄计时器与温度控制 App
番茄计时器首先搭建工程 npx create-react-app demoname 在 src 目录下新建 components ,新建一个 Timer.js,Timer.css Timer.js ...
React State和生命周期 3
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 一:组件的生命周期组件的生命周期可分成三个状态: 安装:已插入真实DOM 更新:正在被重新渲染卸载:已移出 ...
React文档 state and lifecycle
状态和生命周期这篇介绍 React 组件中状态和声明周期的概念.详情可以查看API参考 . 思考前一部分中时钟的例子.渲染元素中,我们仅学习了一种更新 UI 的方式.调用 ReactDOM.rend ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
react前端开发_是的，React正在接管前端开发。问题是为什么。
react前端开发 by Samer Buna 通过Samer Buna 是的,React正在接管前端开发. 问题是为什么. (Yes, React is taking over front-end ...
【React系列】状态（State）和生命周期
在上一篇中写过,组件可以分为函数式组件和类组件,并且更新组件的方法也给出了通过传入ReactDOM.render()方法进行更新.但是这种方式并不能很好地进行封装成独立功能的组件,一些操作会由外部进行 ...
【全栈React】第6天: 状态
本文转载自:众成翻译译者:iOSDevLog 链接:http://www.zcfy.cc/article/3824 原文:https://www.fullstackreact.com/30-days ...

React 实现计时器

React 实现计时器相关推荐

最新文章

热门文章