【Web】React-NextJS开发遇到问题记录以前断断续续看过很多次前端，一直处于能看懂能改，但感觉自己不能写的水平

最近在学习前端开发，使用 Next.js 搭配 Tailwind CSS 开发。

有移动端开发的经验，在布局方面还是比较熟练的，剩下的就是各种元素搭建了，加上 Tailwind CSS 也非常好用，虽然代码不是很好看，但是重在功能了。只要遵循自己的编码规范，整洁度还是可以接受的。

以前断断续续看过很多次前端，一直处于能看懂能改，但感觉自己不能写的水平。这次半个月，写出了一套完整的 H5 网页App，成就感还是非常的强。你的零散努力，终有一天会汇聚为江河湖海。

遇到了一些问题，在此记录。身边没有 React 的大佬，想问人都不知道问谁。国内 Vue 还是主流啊.....

问题

1. 页面上有多个倒计时的显示，useState 的刷新问题，怎么避免每次都刷新整个页面；

类似这个页面，页面上多处都有倒计时，或者按秒的动画。已经把能动的都封装到子组件了，为啥每次刷新整个页面都还是在重新渲染嘞？在最高级打log，每次都会输出。

2. 页面的对话框或者底部的弹框，是怎么写的？

<body>
  <div>
      <div>
        主页面
      </div>

      <model />
      <model />
      <model />
      <dialog />
      <dialog />
  <div>
</body>

是这样吗？如果我有很多个弹框，就写很多个？然后通过 useSate 控制显示？

我用了这个组件：mui.com/material-ui…

有没有像移动端的，直接在方法里面 var dialog = new Dialog()，然后直接 dialog.show() 的？

3. 仿拼多多的“多多视频”，做视频流无限向下滑动用什么控件？

Swiper 这个吗？如果一直滑，视频不会加载的很多吗？怎么避免越来越卡，或者越来越大的内存？页面上的 div 会一直增加。

有没有移动端的列表优化功能。

4. 还是仿拼多多的“多多视频”，视频上下滑动，右上角有福袋边转圈。

需求：

只有播放状态，才会加金币。
每个视频最多可以加10个金币，一秒一个。加过的就不能再加，看过但是不满10个的，还可以加。总之就是每个视频有10个的限额。（可以理解为10秒倒计时）
每次福袋打开之后，可以领取额外的金币。可以理解为福袋集满了。（倒计时走完了）
满了之后，开启下一个等级的福袋。（刷新倒计时）

思路是：

给视频列表的数据，赋值 videoMaxCoin，来记录每个视频的剩余倒计时；
监听视频滑动，监听视频的播放，控制福袋进度动画播放或暂停；
福袋封装为组件，通过主页面的 useState 来控制当前是否加金币、当前视频的倒计时、福袋集满倒计时。

问题：

数据总是对不上，上下滑动、视频播放暂停的时机无法准确判断。不知道是不是 NextJs 的严苛模式影响的。
各种倒计时结束了，更新数据总是有问题。

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

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

5. 版本更新缓存问题。网页UI大更新时，替换了很多图片。正式发布之后，用户端一直加载的是之前本地缓存的图片。之前做App不存在这个问题。网页是怎么解决怎么这个问题的？

网页可能会运行在别人 App 的 WebView 中！

方案：主要是修改图片的访问地址，地址变了就会重新请求了。使用了 Next.Js 提供的 "next/Image"，在 next.config.mjs 配置路径。

const isDev = process.env.ENV !== "PROD";

const remotePatternsArrays = [
  {
    protocol: 'https',
    hostname: '**.cloudfront.net',
  },
  {
    protocol: 'https',
    hostname: '**.amazonaws.com',
  },
];

const nextConfig = isDev ?
  {
    images: {
      remotePatterns: remotePatternsArrays,
    },
  }
  :
  {
    distDir: "dist",
    output: "export",
    images: {
      loader: "custom",
      loaderFile: "./image-loader.js",

      remotePatterns: remotePatternsArrays,
    },
  };

export default nextConfig;

image-loader.js 文件

export default function ImageLoader({src}) {
  if (src?.toString()?.startsWith("http")) {
    return src;
  }
  if (src?.toString()?.startsWith("//")) {
    return `https:${src}`;
  }
  if (src?.toString()?.startsWith("/")) {
    return `${Configs.webUrl}${src}?v=${version}`;
  }
  if (src?.toString()?.startsWith("./")) {
    return `${Configs.webUrl}${src.substring(2)}?v=${version}`;
  }
  return `${Configs.webUrl}${src}?v=${version}`;
}

6. 网页在部分情况下，html 的高度会高于可视高度，导致页面底部 TabBar 可以往上滑一点。（比如，iOS的 Tg MiniApp）

方案：

限制 html 不能滑动，只有内部需要滑动的组件再设置可滑动。这里注意，必须要设定高度。

html {
    overflow: hidden;
    height: 100%;
}

在需要滑动的组件：

<div className="w-dvw h-full overflow-y-auto overscroll-y-contain">
  {children}
</div>

需要设定固定高度：

const bodyHeight = window.innerHeight;
document.body.style.height = bodyHeight + "px"
document.documentElement.style.height = bodyHeight + "px"

后续持续更新，期待大佬解惑。

【Web】React-NextJS开发遇到问题记录

问题