Runs an animating function, calling it before every repaint.
- Use the
useRef()
hook to create two variables.requestRef
will hold the last request id andpreviousTimeRef
will hold the last timestamp. - Define a function,
animate
, which handles updating these variables, runs thecallback
and callsWindow.requestAnimationFrame()
perpetually. - Use the
useEffect()
hook with an empty array to initialize the value ofrequestRef
usingWindow.requestAnimationFrame()
. Use the returned value andWindow.cancelAnimationFrame()
to clean up when the component unmounts.
代码实现
const useRequestAnimationFrame = callback => {
const requestRef = React.useRef();
const previousTimeRef = React.useRef();
const animate = time => {
if (previousTimeRef.current) callback(time - previousTimeRef.current);
previousTimeRef.current = time;
requestRef.current = requestAnimationFrame(animate);
};
React.useEffect(() => {
requestRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(requestRef.current);
}, []);
};
使用样例
const Counter = () => {
const [count, setCount] = React.useState(0);
useRequestAnimationFrame(deltaTime => {
setCount(prevCount => (prevCount + deltaTime * 0.01) % 100);
});
return <p>{Math.round(count)}</p>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<Counter />
);
翻译自:https://www.30secondsofcode.org/react/s/use-request-animation-frame