最近在学习前端开发，使用 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. 还是 仿拼多多的“多多视频”，视频上下滑动，右上角有福袋边转圈。

需求：
  1. 只有播放状态，才会加金币。
  2. 每个视频最多可以加10个金币，一秒一个。加过的就不能再加，看过但是不满10个的，还可以加。总之就是每个视频有10个的限额。（可以理解为10秒倒计时）
  3. 每次福袋打开之后，可以领取额外的金币。可以理解为福袋集满了。（倒计时走完了）
  4. 满了之后，开启下一个等级的福袋。（刷新倒计时）
思路是：
  1. 给视频列表的数据，赋值 videoMaxCoin，来记录每个视频的剩余倒计时；
  2. 监听视频滑动，监听视频的播放，控制福袋进度动画 播放或暂停；
  3. 福袋封装为组件，通过主页面的 useState 来控制 当前 是否加金币、当前视频的倒计时、福袋集满倒计时。
问题：
  1. 数据总是对不上，上下滑动、视频播放暂停 的时机无法准确判断。不知道是不是 NextJs 的严苛模式影响的。
  2. 各种倒计时结束了，更新数据总是有问题。

总感觉思路不是那么的好。

前端的线程控制一般是怎么搞的？ 后台控制任务有没有什么更好的方案？
这个总是刷新控件，真的好难受啊。