ReactJS网站在移动端浏览器出现重渲染与闪烁问题求助

常见诱因（与useEffect使用不当相关的典型场景） #

• useEffect 依赖数组配置错误：如果RealHome.jsx中用于请求Firebase Storage资源的useEffect没有正确填写依赖数组，或者依赖项是每次渲染都会重新生成的对象、函数，会触发useEffect重复执行，拉取资源后更新state引发循环重渲染。
• 多状态连续更新：如果在useEffect中先后更新多个独立状态（比如加载状态、资源列表、页面权限状态等），每次状态更新都会触发一次重渲染，多个状态连续更新就会出现肉眼可见的闪烁效果。
• 异步请求竞态问题：useEffect触发的Firebase Storage资源请求没有配置清理逻辑，组件重渲染时上一次未完成的请求在后续返回结果，会覆盖新请求的状态更新，出现内容来回跳转的闪烁问题。

已验证的修复方案 #

大量使用同类技术栈的开发者都遇到过该问题，以下是经过社区验证的可行修复方案：

• 修正useEffect依赖项：把不需要作为依赖的函数、对象用useCallback、useMemo包裹，确认逻辑无问题的非必要依赖可以添加ESLint忽略规则，避免无意义的useEffect重复触发。
• 批量处理状态更新：把多个需要同步更新的状态合并为一个状态对象，或者使用批量更新方法处理多个状态修改，减少重渲染次数。
• 给异步请求加清理逻辑：在useEffect中添加挂载标记，请求返回后先判断标记有效性再更新状态，避免无效请求污染状态，示例代码如下：

useEffect(() => {
  // 标记当前useEffect是否有效
  let effectActive = true;
  const fetchStorageRes = async () => {
    const data = await firebaseStorage.ref('你的资源路径').getDownloadURL();
    // 仅当前effect有效时才更新状态
    if (effectActive) {
      setStorageRes(data);
      setLoading(false);
    }
  };
  fetchStorageRes();
  // 组件卸载/effect重新触发时标记为失效
  return () => {
    effectActive = false;
  };
}, [/* 填写正确的依赖项 */]);

• 如果仅在GitHub Pages部署的生产环境出现问题，可以排查打包配置是否异常，同时确认React 18严格模式是否在生产环境被错误开启，严格模式默认仅在开发环境触发两次重渲染用于副作用校验，生产环境不会生效。

内容的提问来源于stack exchange，提问作者Joshua Yang