网站开发师,网站建设的重要性 学校,深圳有几个区哪个区最繁华,商标综合查询介绍一下,就一个界面会一直跑时间,项目有个需求需要用到毫秒级计时器,那我肯定想到用组件了塞,但是组件的状态和组件的数据都是不互通的都是独立的,因此我写了下面这个组件,组件的状态会由父组件控制切记#xff0c;必须是同一个父组件#xff0c;因为状态是父组件控制的必须是同一个父组件因为状态是父组件控制的如果是多个页面多个父组件的话可以不用看,一键控制所有的组件的开启或者暂停,也可以控制所有组件是否重新启动重新计时,当前也考虑到了如果组件不是同时出现这个数据怎么保持一致的这个方案,组件代码如下 import React, { useState, useEffect, useRef } from react
import { Text, View, Button, StyleSheet } from react-nativeconst Timer ({ isRunning, elapsedTime, onStart, onStop, firstElapsedTime }) {const startTimeRef useRef(null)const animationIdRef useRef(null)const previousTimeRef useRef(0)const startTimer () {startTimeRef.current Date.now() - elapsedTimeanimationIdRef.current requestAnimationFrame(updateTimer)}const stopTimer () {cancelAnimationFrame(animationIdRef.current)}const updateTimer () {const currentTime Date.now()const elapsedTime currentTime - startTimeRef.currentpreviousTimeRef.current elapsedTimeonStart(elapsedTime)animationIdRef.current requestAnimationFrame(updateTimer)}useEffect(() {if (isRunning) {startTimer()} else {stopTimer()}return () {stopTimer()}}, [isRunning])const handleControl () {if (isRunning) {onStop()} else {startTimer()}}const formatTime (milliseconds) {const minutes Math.floor(milliseconds / (60 * 1000))const seconds Math.floor((milliseconds % (60 * 1000)) / 1000)const millisecondsFraction Math.floor((milliseconds % 1000) / 10)return ((minutes 10 ? 0 : ) minutes : (seconds 10 ? 0 : ) seconds : (millisecondsFraction 10 ? 0 : ) millisecondsFraction)}return (ViewText{formatTime(firstElapsedTime)}/Text/View)
}const ParentComponent () {const [timers, setTimers] useState([{ id: 1, isRunning: false, elapsedTime: 0 },{ id: 2, isRunning: false, elapsedTime: 0 },{ id: 3, isRunning: false, elapsedTime: 0 },])const [nextId, setNextId] useState(4)const handleStartAll () {setTimers(timers.map(timer ({ ...timer, isRunning: true })))}const handlePauseAll () {setTimers(timers.map(timer ({ ...timer, isRunning: false })))}const handleContinueAll () {setTimers(timers.map(timer ({ ...timer, isRunning: true })))}const handleRestartAll () {handlePauseAll()setTimeout(() {setTimers(timers.map(timer ({ ...timer, isRunning: true, elapsedTime: timers[0].elapsedTime })))}, 100)}const handleAddTimer () {const firstTimerElapsedTime timers[0].elapsedTime // 获取第一个计时器组件的时间const newTimer { id: nextId, isRunning: false, elapsedTime: firstTimerElapsedTime }setNextId(nextId 1)setTimers([...timers, newTimer])}return (View style{styles.container}View style{styles.timerContainer}{timers.map(timer (Timerkey{timer.id}isRunning{timer.isRunning}elapsedTime{timer.elapsedTime}onStart{elapsedTime {const newTimers [...timers]const index newTimers.findIndex(t t.id timer.id)newTimers[index].elapsedTime elapsedTimesetTimers(newTimers)}}onStop{() {const newTimers [...timers]const index newTimers.findIndex(t t.id timer.id)newTimers[index].isRunning falsesetTimers(newTimers)}}firstElapsedTime{timers[0].elapsedTime} // 传递第一个计时器的elapsedTime给Timer组件/))}/ViewView style{styles.buttonContainer}Button title{timers.some(timer timer.isRunning) ? 全部暂停 : 全部开始} onPress{timers.some(timer timer.isRunning) ? handlePauseAll : handleStartAll} /Button title继续 onPress{handleContinueAll} /Button title重新启动 onPress{handleRestartAll} /Button title添加新组件(需要先暂停才行,时间最初为00:00:00,点击开始后时间以第一个组件时间为准) onPress{handleAddTimer} //View/View)
}const styles StyleSheet.create({container: {flex: 1,justifyContent: center,alignItems: center,},timerContainer: {marginBottom: 20,},buttonContainer: {flexDirection: column,justifyContent: space-around,marginTop: 20,},
})export default ParentComponent 上面的组件说明下:(时间会有差别,但是差别不大,基本在几毫秒之内,为了保持数据的一致性,我将都参照第一个组件的时间为准,点击暂停时,所有组件的时间都跟第一个组件保持一致) 点击开始:所有组件开始计时 点击暂停:所有组件全部暂停 点击重启:计时从0开始,重新计时 点击新增组件:需要先暂停才行,因为页面一直在渲染添加不上,我没解决掉,有大佬能解决了更好,还有就是时间以第一个组件显示的时间为准,包括暂停也都是(为了保证所有组件计时的时间的同步) PS:上面的那个组件展示没必要用循环奥,直接按照下面写也行【如果需要用循环写,也可用循环】
Timerkey{timers[0].id}isRunning{timers[0].isRunning}elapsedTime{timers[0].elapsedTime}onStart{elapsedTime {const newTimers [...timers]const index newTimers.findIndex(t t.id timers[0].id)newTimers[index].elapsedTime elapsedTimesetTimers(newTimers)}}onStop{() {const newTimers [...timers]const index newTimers.findIndex(t t.id timers[0].id)newTimers[index].isRunning falsesetTimers(newTimers)}}firstElapsedTime{timers[0].elapsedTime} // 传递第一个计时器的elapsedTime给Timer组件/上面代码在需要用到组件的地方直接用就行相当于每个组件都用第一个的状态或者每个都用自己的状态其实效果是一样的这种是对于不需要循环在某一个地方使用的情况就算是循环直接循环三个这样的也行总之就是这样写也可以用循环写也可以这个各位自己定
