React onClick函数会影响动画的混乱

Question

我的函数把我的动画搞砸了。我有一个小音频播放器，它使用onClick播放/暂停按钮来帮助管理几个useStates(currentTime和duration(的信息，并在播放歌曲时移动进度条和更新时间滚动条，在歌曲暂停时停止。所以它每秒钟都在运行。我还希望动画在单击同一按钮时开始和暂停。问题是，每次运行时，都会重置动画。如有任何帮助，我们将不胜感激。谢谢，你会的。

const [isPlaying, setIsPlaying] = useState(false);
const [duration, setDuration] = useState(0);
const [currentTime, setCurrentTime] = useState(0);
const [animation, setAnimation] = useState(false);
const isPlayingHandler = () => {
const prevValue = isPlaying;
setIsPlaying(!prevValue);
if (!prevValue) {
audio.current.play();
setAnimation(true);
progressBarAnimation.current = requestAnimationFrame(whilePlaying);
} else {
audio.current.pause();
setAnimation(false);
cancelAnimationFrame(progressBarAnimation.current);
};

<button className={styles.playPauseButton} onClick={isPlayingHandler}>
{ isPlaying ? <BsPauseCircleFill /> : <BsPlayCircleFill /> }</button>

还有更多的代码，但这些都是影响动画状态的位。

Answer 1

默认情况下工作正常，组件的动画将被重新渲染。当你不想让应用程序的特定部分重新渲染(总是(时，解决方案是将该部分封装到useCallback函数中(它将返回内存化的动画，如果它的依赖数组发生变化，就会发生变化(与useEffect相同((。以下是您的代码的外观(这只是一个想法(：

const memoizedCallback = useCallback(
() => {
const prevValue = isPlaying;
setIsPlaying(!prevValue);
if (!prevValue) {
audio.current.play();
setAnimation(true);
progressBarAnimation.current = 
requestAnimationFrame(whilePlaying);
} else {
audio.current.pause();
setAnimation(false);
cancelAnimationFrame(progressBarAnimation.current);
},
[setAnimation, requestAnimationFrame, animation],
);