馃コ娆㈣繋鎰熷叴瓒ｇ殑灏忎紮浼达紝涓€璧锋潵鍋氱偣鏈夋剰涔夌殑浜嬫儏鍚э紒鎴戝彂璧蜂簡涓€涓瘡鍛ㄧ炕璇戦」鐩€備粨搴撳湴鍧€鍜岃闂湴鍧€杩樺緢缂哄織鍚岄亾鍚堢殑灏忎紮浼淬€傝繖绾补鏄釜浜哄叴瓒ｃ€傚綋鐒讹紝涔熸湁鍔╀簬鎻愰珮鑻辫鍜屽墠绔妧鑳姐€傝姹傦細鑻辫涓嶈兘宸殑绂昏氨锛実ithub绮鹃€氾紝鏈夋瘏鍔涳紝璋﹁櫄锛屽仛浜嬫湁璐ｄ换鎰熴€傛兂鍙備笌鐨勬湅鍙嬪彲浠ョ淇x鎴栬€呯粰浠撳簱鍙慽ssue娑堟伅銆傛垜鐨勫崥瀹篃鏈夊叿浣撶殑涓汉鑱旂郴鏂瑰紡锛歞aodaolee.cn鍓嶈█Pomodone锛氫竴涓熀浜?5鍒嗛挓闂撮殧宸ヤ綔鐨凱omodoro宸ヤ綔鐨勬椂闂磋窡韪皬搴旂敤銆傚畠鏈変竴涓?5鍒嗛挓鐨勮鏃跺櫒锛堝湪WebWorker涓繍琛岋級骞跺皢鈥減oms鈥濈殑鍘嗗彶璁板綍淇濆瓨鍒颁竴涓皬鍨婩irebase鏁版嵁搴撲腑锛孭ortal鍜孯eact鐨勯挬瀛愮殑浣跨敤鏄竴涓緢濂界殑鍖呰鍣紝鎴戝垱寤轰簡涓€涓猽seCurrentUser閽╁瓙鏉ョ洃鍚韩浠介獙璇佹洿鏀瑰苟鐩稿簲鍦拌缃竴浜涚姸鎬併€傜劧鍚庯紝褰撴敞鎰忓埌韬唤楠岃瘉鏇存敼鏃讹紝鎴戝彲浠ョ‘淇eact灏嗘寜闇€閲嶆柊鍛堢幇銆俥xportconstuseCurrentUser=()=>{const[currentUser,setCurrentUser]=useState(undefined)useEffect(()=>{returnfirebase.auth().onAuthStateChanged((details)=>{setCurrentUser(details?{displayName:details.displayName,provider:{'google.com':'Google','github.com':'GitHub',}[details.providerData[0].providerId],uid:details.uid,}:null)})},[])return[currentUser]}鍦ㄤ换浣曠粍浠朵腑锛屽彲浠ヨ繖鏍峰啓锛歝onst[currentUser]=useCurrentUser()杩欑鍐欐硶锛屽伐浣滈噺寰堝皬锛屼换浣曠粍浠堕兘鍙互蹇€熻闂埌褰撳墠鐢ㄦ埛銆傚敮涓€鐨勭己鐐规槸onAuthStateChanged鐨勨€嬧€嬬洃鍚櫒鍙兘鏈夊緢澶氾紝鍙互閫氳繃鍙粦瀹氫竴涓洃鍚櫒鎴栬€呭皢褰撳墠鐢ㄦ埛鏀惧湪褰撳墠涓婁笅鏂囦腑鏉ラ伩鍏嶃€傝鍒颁笂涓嬫枃锛屽畠鏇存帴杩戜簬瀹冨湪Svelte涓殑鍐欐硶锛歿currentUser.set({displayName:details.displayName,provider:{'google.com':'Google','github.com':'GitHub',}[details.providerData[0].providerId],uid:details.uid,})}else{currentUser.set(null)}})}鍦ㄩ珮绾velte缁勪欢涓紝鍙互鍦╫nMount涓皟鐢紝缁勪欢瀹夎鏃朵細杩愯涓€娆★紙璇ユ柟娉曚細杩斿洖锛屾墍浠ュ彲浠nsubscribe鍒犻櫎缁勪欢鏃讹紝灏卞儚useEffect杩斿洖鍑芥暟涓€鏍?onMount(()=>{returnlistenForAuthChanges()})鐜板湪锛屽湪Svelte浠ｇ爜鐨勪换浣曞湴鏂癸紝缁勪欢閮藉彲浠ュ鍏urrentUser鍙啓瀛樺偍銆傛垜姣旇緝鍏冲績鐨勬槸currentUser涓嶆槸涓€涓€硷紝鑰屾槸涓€涓猻tore锛屾墍浠ュ畠鏈夌粷瀵圭殑鐘舵€佹帶鍒躲€傚綋鐒讹紝浣犱篃鍙互璁㈤槄瀹冨苟鎵嬪姩淇敼鐘舵€佸彉鍖栵細currentUser.subscribe(newValue=>{...})鎴栬€咃紝濡傛灉浣犲彧鎯宠鍙栨渶鏂扮殑鍊硷紝浣犲彲浠ユ坊鍔犱竴涓?鍓嶇紑锛歝onsole銆備笂闈㈢殑log($currentUser)鏄疭velte鐨勪竴浜涜娉曟妧宸с€?绗﹀彿灏嗚嚜鍔ㄨ闃呭晢搴椾腑鐨勬渶鏂板€笺€傚畠鐨勪紭鐐规槸Svelte涓嶅繀鍦ㄦ瘡娆￠渶瑕佽鍙栨渶鏂板€兼椂閮借繘琛岃闃呫€傜畝鑰岃█涔嬶紝杩欎袱涓簱浼间箮閮介噰鐢ㄤ簡绫讳技鐨勬柟娉曪細閮藉厑璁歌闃匜irebase渚﹀惉鍣紙涓婇潰鐨勬紨绀猴級锛屽苟鍦ㄧ姸鎬佹洿鏀规椂鏇存柊鏁版嵁銆傛垜浣跨敤Worker璁捐浜嗏€嬧€婸omodone)浠ュ敖鍙兘鍑嗙‘鍦颁繚鎸?5鍒嗛挓鐨勮鏃跺櫒杩愯銆傚鏋滄祻瑙堝櫒閫夐」鍗″湪鍚庡彴锛堜緥濡傦紝涓嶆槸鐒︾偣閫夐」鍗★級锛屽ぇ澶氭暟娴忚鍣ㄥ皢闄嶄綆鍏秙etTimeout璋冪敤鐨勪紭鍏堢骇锛岃€屼笉鏄弗鏍兼寜鏃惰繍琛屽畠浠€傚ぇ澶氭暟鏃跺€欒繖鍦ㄧ綉缁滀笂涓嶆槸浠€涔堝ぇ闂锛屼絾鏄綋鐢ㄦ埛閫氳繃鎮ㄧ殑搴旂敤璺熻釜25鍒嗛挓鐨勫伐浣滄椂锛屽畠灏卞彉鎴愪簡涓€涓棶棰橈紒姝ゅ锛屽湪25鍒嗛挓鐨勮繃绋嬩腑锛屼换浣曞井灏忕殑鏃垛€嬧€嬮棿宸紓閮戒細瀵艰嚧鏈€缁堟椂闂寸浉宸敋杩溿€備絾鏄紝濡傛灉灏嗚繖浜涜秴鏃剁Щ鍒癢ebWorker涓紝瀹冧滑灏变細鎸夋椂杩愯锛屽苟涓斾笉浼氳娴忚鍣ㄥ彇娑堜紭鍏堢骇銆傚洜姝わ紝鍦ㄦ垜鐨凾racker缁勪欢涓紝鎴戦渶瑕佸疄渚嬪寲涓€涓獁ebworker锛屽彂閫佷俊鎭拰鎺ユ敹鏁版嵁锛堟瘮濡傚墿浣欐椂闂达級銆傛垜鍙戠幇React姣擲velte绠＄悊璧锋潵鏇撮夯鐑︺€傚洜涓烘瘡娆￠噸鏂版覆鏌撶粍浠堕兘浼氶噸鏂版墽琛孯eact缁勪欢锛屾墍浠ュ緢瀹规槗鍒涘缓鎴愬崈涓婁竾鐨剋orker銆傝繖鏃跺€欏氨闇€瑕佷娇鐢╱seRef鏉ュ紩鐢ㄥ垱寤虹殑worker鏉ラ伩鍏嶈繖涓棶棰樸€傞鍏堬紝鎴戣缃簡鎵€闇€鐨勭粍浠跺垵濮嬬姸鎬侊細const[currentPom,setCurrentPom]=useState(null)const[currentUser]=useCurrentUser()constworker=useRef(null)鐒跺悗锛屽垱寤轰竴涓猽seEffect閽╁瓙鏉ュ疄渚嬪寲worker锛岃繖鏄繀瑕佺殑濡傛灉鏄繖鏍凤紝缁戝畾鍙︿竴涓簨浠讹細useEffect(()=>{if(!worker.current){worker.current=newWorker(workerURL)window.worker=worker.current}constonMessage=(event)=>{if(event.data.name==='tick'){setCurrentPom((currentPom)=>({...currentPom,secondsRemaining:event.data.counter,}))}elseif(event.data.name==='start'){//姝ゅ鍒犻櫎浜嗘洿澶氬垎鏀互鑺傜渷绌洪棿...}}worker.current.addEventListener('message',onMessage)return()=>{worker.current.removeEventListener('message',onMessage)}},[currentUser])鎺ヤ笅鏉ワ紝褰撶敤鎴风偣鍑籗tart鎸夐挳鏃讹紝灏嗗悜worker鍙戦€佷竴鏉℃秷鎭細constonStartPom=()=>{if(!worker.current)returnworker.current.postMessage('startTimer')}濡傛灉鐢⊿velte鍐欙紝浠ｇ爜灏卞緢similar锛屼絾鏄湁涓や釜鍦版柟浼氭洿瀹规槗锛氫笉闇€瑕佸皢worker淇濈暀鍦╱serRef涓婏紝浣犲彧闇€瑕佸垎閰嶄竴涓彉閲忓皢浜嬩欢鐩戝惉灏佽鎴愪竴涓嚱鏁帮紝璇ュ嚱鏁颁笉浼氭垚涓簎serEffect鐨勪緷璧栤€斺€斿嵆灏佽鍦╱serCallback涓璴etworkeronMount(()=>{worker=newWorker(workerURL)worker.addEventListener('message',onWorkerMessage)return()=>{worker.removeEventListener('message',onWorkerMessage)}})涓嶉渶瑕佺敤React鐨剆etX(oldX=>newX)绾︽潫璁剧疆鐘舵€侊紝鍙渶瑕佹敼鍙樺眬閮ㄥ彉閲忥細event.data.counter,}}elseif(event.data.name==='start'){//姝ゅ鍒犻櫎浜嗘洿澶氬垎鏀互鑺傜渷绌洪棿...}}鏉′欢娓叉煋鎴戝枩娆eact鐨勯儴鍒嗗師鍥犲湪浜庢ā鏉胯娉旹mbedJSin://React
- {pomsForCurrentDay.map(entryData,index)=>{constfinishedAt=format(newDate(entryData.timeFinished),'H:mm:ss')return
helloworld!