React.js项目页面首次加载JS不生效、刷新后恢复正常问题咨询

• 你引入的第三方功能脚本（负责解析data-bgimage属性、Wow动画效果）在index.html初始化阶段就会执行，首次进入站点时React尚未完成HomePage组件挂载，脚本找不到对应DOM节点，无法完成功能初始化
• React路由为客户端侧跳转，不会触发页面全局重载，已经执行完毕的第三方脚本不会自动重新运行，因此路由切换进入HomePage后新渲染的DOM不会被脚本处理
• 刷新页面时全局资源重新加载，脚本执行时HomePage组件已经完成挂载，因此功能可以正常生效

最优方案：替换data属性为原生React内联样式 #

直接用React标准的style属性设置背景，完全不依赖第三方脚本的data属性解析逻辑，从根源避免执行时机问题：

// 把homepage.js里的section标签替换为如下写法
<section 
  id="section-hero" 
  className="no-top no-bottom" 
  style={{background: 'url(images/background/11.jpg) left bottom'}}
>

方案2：组件挂载后手动触发脚本初始化 #

如果需要保留Wow动画等其他依赖第三方脚本的功能，可以在HomePage组件挂载后重新调用脚本的初始化方法：

import React, { useEffect } from 'react';

const HomePage = () => {
  useEffect(() => {
    // 重新初始化Wow动画
    if(window.WOW) new window.WOW().init();
    // 调用主题脚本暴露的全局初始化方法（可在你引入的第三方脚本中查找对应方法名，通常为init、initTheme等）
    window.themeInit?.();
  }, []);

  // 原有组件逻辑不变
  return (
    <div className="no-bottom no-top" id="content">
      {/* 原有代码 */}
    </div>
  )
}

方案3：调整脚本加载时机 #

将index.html中引入的第三方脚本添加defer属性，确保脚本在DOM完全解析完成后再执行：

<script src="你的脚本路径" defer></script>

偶发的控制台报错是脚本提前执行找不到对应DOM导致的，修复脚本执行时机问题后报错会同步消失。

内容的提问来源于stack exchange，提问作者Emre Varol