最近在学习前端开发，使用 Next.js 搭配 Tailwind CSS 开发。
遇到了一些问题，在此记录。 身边没有 React 的大佬，想问人都不知道问谁。国内 Vue 还是主流啊。
问题
1. 页面上有多个倒计时的显示，useState 的刷新问题，怎么避免每次都刷新整个页面；
2. 页面的对话框或者底部的弹框，是怎么写的？
<body>
<div>
<div>
主页面
</div>
<model />
<model />
<model />
<dialog />
<dialog />
<div>
</body>
是这样吗？如果我有很多个弹框，就写很多个？ 然后通过 useSate 控制显示？
我用了这个组件：https://mui.com/material-ui/react-modal/#basic-modal
有没有像移动端的，直接在方法里面 var dialog = new Dialog()， 然后直接 dialog.show() 的？
3. 仿拼多多的“多多视频”，做视频流无限向下滑动用什么控件？
Swiper 这个吗？如果一直滑，视频不会加载的很多吗？怎么避免越来越卡，或者越来越大的内存？ 页面上的 div 会一直增加。
有没有移动端的 列表优化功能。
4. 还是 仿拼多多的“多多视频”，视频上下滑动，右上角有福袋边转圈。
需求：
- 只有播放状态，才会加金币。
- 每个视频最多可以加10个金币，一秒一个。加过的就不能再加，看过但是不满10个的，还可以加。总之就是每个视频有10个的限额。（可以理解为10秒倒计时）
- 每次福袋打开之后，可以领取额外的金币。可以理解为福袋集满了。（倒计时走完了）
- 满了之后，开启下一个等级的福袋。（刷新倒计时）
思路是：
- 给视频列表的数据，赋值 videoMaxCoin，来记录每个视频的剩余倒计时；
- 监听视频滑动，监听视频的播放，控制福袋进度动画 播放或暂停；
- 福袋封装为组件，通过主页面的 useState 来控制 当前 是否加金币、当前视频的倒计时、福袋集满倒计时。
问题：
- 数据总是对不上，上下滑动、视频播放暂停 的时机无法准确判断。不知道是不是 NextJs 的严苛模式影响的。
- 各种倒计时结束了，更新数据总是有问题。
总感觉思路不是那么的好。
前端的线程控制一般是怎么搞的？ 后台控制任务有没有什么更好的方案？
这个总是刷新控件，真的好难受啊。
