如何将React的useScript Hook改造为支持多脚本的useScriptMulti？

原有代码与需求 #

现有单个脚本加载Hook：

import { useEffect } from 'react';

const useScript = url => {
    useEffect(() => {
        const script = document.createElement('script');

        script.src = url;
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        }
    }, [url]);
};

export default useScript;

当前需多次调用加载多个脚本：

useScript("script1.js")
useScript("script2.js")
useScript("script3.js")

希望改为一次调用传入多个URL的形式：

useScriptMulti("script1.js","script2.js","script3.js")

解决方案 #

修改后的useScriptMulti Hook实现：

import { useEffect } from 'react';

const useScriptMulti = (...urls) => {
  useEffect(() => {
    // 遍历所有URL，创建并插入script元素
    const scripts = urls.map(url => {
      const script = document.createElement('script');
      script.src = url;
      script.async = true;
      document.body.appendChild(script);
      return script;
    });

    // 清理函数：移除所有创建的script元素
    return () => {
      scripts.forEach(script => {
        if (document.body.contains(script)) {
          document.body.removeChild(script);
        }
      });
    };
  }, [urls]);
};

export default useScriptMulti;

关键说明 #

• 用剩余参数语法(...urls)接收任意数量的URL参数，自动转为数组处理
• 每个URL对应创建一个script元素，保持原有async加载逻辑
• 收集所有创建的script实例，在组件卸载或URL变化时统一移除，避免内存泄漏
• 依赖数组传入urls，确保URL列表更新时重新执行加载流程

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