React中重构JS文件：重复组件脚本加载代码的复用咨询

嘿，我太懂这种重复写代码的烦躁了——咱们把这段脚本加载逻辑彻底封装成可复用模块，以后一个import就能搞定！

先在项目里新建一个工具文件，比如utils/loadExternalScripts.js（路径可以根据你的项目结构调整），把脚本数组和加载逻辑都塞进去：

// utils/loadExternalScripts.js
// 把需要加载的脚本路径整理成数组
const requiredScripts = [
  "/lib/jquery/jquery.min.js",
  "/lib/jquery/jquery-migrate.min.js",
  "/lib/bootstrap/js/bootstrap.bundle.min.js",
  "/lib/easing/easing.min.js",
  "/lib/superfish/hoverIntent.js",
  "/lib/superfish/superfish.min.js",
  "/lib/wow/wow.min.js",
  "/lib/waypoints/waypoints.min.js",
  "/lib/counterup/counterup.min.js",
  "/lib/owlcarousel/owl.carousel.min.js",
  "/lib/isotope/isotope.pkgd.min.js",
  "/lib/lightbox/js/lightbox.min.js",
  "/lib/touchSwipe/jquery.touchSwipe.min.js",
  "/lib/main.js",
  "/contactform/contactform.js"
];

// 封装成可调用的函数，还加了重复加载检查
export const loadExternalScripts = () => {
  requiredScripts.forEach(src => {
    // 先判断页面里有没有这个脚本，避免重复插入
    if (!document.querySelector(`script[src="${src}"]`)) {
      const script = document.createElement("script");
      script.src = src;
      script.async = false;
      script.defer = false;
      document.body.appendChild(script);
    }
  });
};

这里我把原来的对象数组简化成了字符串数组（毕竟每个元素只有src属性），还加了重复加载校验——这很关键，不然多个组件调用的话，页面会被插入一堆相同的脚本标签，容易出问题。

类组件用法 #

在你的类组件里，直接导入这个函数，然后在componentDidMount里调用就行：

import { loadExternalScripts } from './utils/loadExternalScripts';

class YourComponent extends React.Component {
  componentDidMount() {
    loadExternalScripts();
  }

  // ...组件其他逻辑
}

函数组件用法（Hook版本） #

如果是用函数式组件，就用useEffect替代componentDidMount：

import { useEffect } from 'react';
import { loadExternalScripts } from './utils/loadExternalScripts';

const YourFunctionalComponent = () => {
  useEffect(() => {
    loadExternalScripts();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // ...组件其他逻辑
};

• 如果需要某个脚本加载完成后执行特定逻辑，可以给脚本加onload事件：

// 在创建script标签的地方添加
script.onload = () => {
  console.log(`${src} 加载完成啦`);
  // 这里可以写该脚本对应的初始化逻辑
};

• 如果你的项目用了webpack这类构建工具，其实可以优先考虑通过npm安装第三方库（比如jquery、bootstrap），然后直接import引入，比手动创建script标签更规范；但如果这些是项目里的本地静态脚本，上面的方法就非常合适。

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