如何解决React - setState 导致延迟构建节拍器
我正在使用 Web Worker 制作带有 react hook 的节拍器。
问题是,当我将 setCount 放在 useEffect 上以制作第一拍的重音位时,
由于某些原因导致延迟,使节拍器无法正常工作。
有什么办法可以避免这种情况吗?
否则我必须将此代码更改为类组件...
useEffect(() => {
const WorkerInstance= new Worker(`${process.env.PUBLIC_URL}/Worker.js`);
setWorker(WorkerInstance);
return ()=>{
WorkerInstance.terminate();
console.log('terminate');
}
},[]);
useEffect(() => {
if(worker){
worker.onmessage = ({data}) =>{
if(data="tick"){
sound.play();
setCount(c=>c+1);
}
};
worker.postMessage({message:"interval",interval: 60/bpm/beat*4*1000});
}
},[worker,bpm,beat])
useEffect(()=>{
console.log(count);
},[count]);
const playPause =()=>{
worker.postMessage({message: !play ? "start": "stop"});
setPlay(!play);
}
完整代码在这里 https://codesandbox.io/s/clever-rgb-nejri?file=/src/App.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。