最近在學(xué)習(xí)前端開(kāi)發(fā)，使用 Next.js 搭配 Tailwind CSS 開(kāi)發(fā)。
遇到了一些問(wèn)題，在此記錄。 身邊沒(méi)有 React 的大佬，想問(wèn)人都不知道問(wèn)誰(shuí)。國(guó)內(nèi) Vue 還是主流啊。
問(wèn)題
1. 頁(yè)面上有多個(gè)倒計(jì)時(shí)的顯示，useState 的刷新問(wèn)題，怎么避免每次都刷新整個(gè)頁(yè)面；
2. 頁(yè)面的對(duì)話框或者底部的彈框，是怎么寫的？
<body>
<div>
<div>
主頁(yè)面
</div>
<model />
<model />
<model />
<dialog />
<dialog />
<div>
</body>
是這樣嗎？如果我有很多個(gè)彈框，就寫很多個(gè)？ 然后通過(guò) useSate 控制顯示？
我用了這個(gè)組件：https://mui.com/material-ui/react-modal/#basic-modal
有沒(méi)有像移動(dòng)端的，直接在方法里面 var dialog = new Dialog()， 然后直接 dialog.show() 的？
3. 仿拼多多的“多多視頻”，做視頻流無(wú)限向下滑動(dòng)用什么控件？
Swiper 這個(gè)嗎？如果一直滑，視頻不會(huì)加載的很多嗎？怎么避免越來(lái)越卡，或者越來(lái)越大的內(nèi)存？ 頁(yè)面上的 div 會(huì)一直增加。
有沒(méi)有移動(dòng)端的 列表優(yōu)化功能。
4. 還是 仿拼多多的“多多視頻”，視頻上下滑動(dòng)，右上角有福袋邊轉(zhuǎn)圈。
需求：
- 只有播放狀態(tài)，才會(huì)加金幣。
- 每個(gè)視頻最多可以加10個(gè)金幣，一秒一個(gè)。加過(guò)的就不能再加，看過(guò)但是不滿10個(gè)的，還可以加。總之就是每個(gè)視頻有10個(gè)的限額。（可以理解為10秒倒計(jì)時(shí)）
- 每次福袋打開(kāi)之后，可以領(lǐng)取額外的金幣。可以理解為福袋集滿了。（倒計(jì)時(shí)走完了）
- 滿了之后，開(kāi)啟下一個(gè)等級(jí)的福袋。（刷新倒計(jì)時(shí)）
思路是：
- 給視頻列表的數(shù)據(jù)，賦值 videoMaxCoin，來(lái)記錄每個(gè)視頻的剩余倒計(jì)時(shí)；
- 監(jiān)聽(tīng)視頻滑動(dòng)，監(jiān)聽(tīng)視頻的播放，控制福袋進(jìn)度動(dòng)畫 播放或暫停；
- 福袋封裝為組件，通過(guò)主頁(yè)面的 useState 來(lái)控制 當(dāng)前 是否加金幣、當(dāng)前視頻的倒計(jì)時(shí)、福袋集滿倒計(jì)時(shí)。
問(wèn)題：
- 數(shù)據(jù)總是對(duì)不上，上下滑動(dòng)、視頻播放暫停 的時(shí)機(jī)無(wú)法準(zhǔn)確判斷。不知道是不是 NextJs 的嚴(yán)苛模式影響的。
- 各種倒計(jì)時(shí)結(jié)束了，更新數(shù)據(jù)總是有問(wèn)題。
總感覺(jué)思路不是那么的好。
前端的線程控制一般是怎么搞的？ 后臺(tái)控制任務(wù)有沒(méi)有什么更好的方案？
這個(gè)總是刷新控件，真的好難受啊。
