在React中引入多个script标签，并同步执行

1. 前言

最近在用React写一个小项目时，遇到了这样的需求：

在某个组件中引入外部js文件，也就是引用一个或多个script标签。这些script标签仅供某个组件使用，所以不想在html页面中直接引进来，想就在相应的React的函数组件中引入，查阅了相关资料，找到了以下可行办法。

2. 动态创建script标签并执行

在组件挂载时，动态创建script标签，并设置标签的src属性，若不是外部文件，还可以设置innerHTML，然后追加到body标签的最下面。

在组件即将卸载时，移除这个标签。

❗❗❗注意：

默认情况下， 以这种方式创建的script元素是以异步方式加载的m，相当于添加了async属性。但不是所有浏览器都支持async属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

myScript.async = false;

🔍有关script标签async和defer的区别，请看这里。

函数组件写法（useEffect）

useEffect(() => {
    // 组件挂载时，创建script标签
    const myScript = document.createElement('script');
    // 设置标签的src属性
    myScript.src = "myScript.js";
    // 明确设置为同步加载
    myScript.async = false;
    // 追加到body标签的最下面
    document.body.appendChild(myScript);
    return () => {
        // 组件即将卸载时，移除标签
        document.body.removeChild(myScript);
    };
}, []);

❗❗❗注意：

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级，可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部（HTML文件头部）显式声明：

<link
    rel="preload"
    href="XXXXXXXXXXXXXXXXXXXXXX.js"
    as="script"
/>

3. 按顺序引入两个script标签

若想引入两个script标签，但script1必须先加载，script2后加载，两者有顺序关系，这时候只需要声明async = false，再按希望的执行顺序创建标签即可，但要注意一下移除标签的顺序，先移除script2：

useEffect(() => {
    const script1 = document.createElement('script');
    script1.src = 'script1.js';
    // 显示声明同步加载
    script1.async = false;
    document.body.appendChild(script1);

    const script2 = document.createElement('script');
    script2.src = 'script2.js';
    // 显示声明同步加载
    script2.async = false;
    document.body.appendChild(script2);
    return () => {
        // 先移除script2
        document.body.removeChild(script2);
        document.body.removeChild(script1);
    };
}, []);

同样地，在文档头部（HTML文件头部）显式声明这些文件的存在：

<link
    rel="preload"
    href="script1.js"
    as="script"
/>
<link
    rel="preload"
    href="script2.js"
    as="script"
/>

4. 封装自定义hook

将顺序引入两个外部js文件，封装成自定义hook，精简代码：

import { useEffect } from 'react';

const useScript = (url1, url2) => {
    // 顺序引入两个外部js文件
    useEffect(() => {
        const script1 = document.createElement('script');
        script1.src = url1;
        script1.async = false;
        document.body.appendChild(script1);

        const script2 = document.createElement('script');
        script2.src = url2;
        script2.async = false;
        document.body.appendChild(script2);
        return () => {
            document.body.removeChild(script2);
            document.body.removeChild(script1);
        };
    }, [url1, url2]);
};

export default useScript;

这里我封装了顺序引入两个外部js文件，也可以写成引入1个的。

在需要引入script标签的地方，这样使用：

import useScript from '../../../hooks/useScript';
...

const Demo = () => {
	...
    // 顺序引入两个外部js文件
    useScript(url1, url2);
    
    ...
};

export default Demo;

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/