requestAnimationFrame

requestAnimationFrame(callback)

即只呼叫一次

code:javascript

const requestRef = React.useRef()

const previousTimeRef = React.useRef()

const animate = time => {

if (previousTimeRef.current != undefined {

const delta = time - previousTimeRef.current

// do something to the state you want to change

}

previousTimeRef.current = time

requestRef.current = requestAnimationFrame(animate)

}

React.useEffect(() => {

requestRef.current = requestAnimationFrame(animate)

return () => cancelAnimationFrame(requestRef.current)

}, [])

code:javascript

const useAnimationFrame = callback => {

const requestRef = React.useRef()

const previousTimeRef = React.useRef()

const animate = time => {

if (previousTimeRef.current != undefined) {

const deltaTime = time - previousTimeRef.current

callback(deltaTime)

}

previousTimeRef.current = time

requestRef.current = requestAnimationFrame(animate)

}

React.useEffect(() => {

requestRef.current = requestAnimationFrame(animate)

return () => cancelAnimationFrame(requestRef.current)

}, [])

}

const Counter = () => {

useAnimationFrame(deltaTime => {

setCount(prevCount => (prevCount + deltaTime * 0.01) % 100)

})

return <div>{Math.round(count)}</div>

}

ReactDOM.render(<Counter />, document.getElementById('app'))