React中异步引入script标签

公众号：程序员波波

React中支持异步加载script，通过react-loadable可以在React中异步import。

但是目前遇到一个问题，引入全局的script标签。但是如果把所有标签全部写在index.html中的话，那么第一页加载的速度会变慢，所以希望实现异步引入script标签的方法。

目前通过document.createElement的方法来动态创建脚本标签，然后通过document.body.appendChild将脚本加入body中。然后在页面componentDidMount的时候调用改方法。做了一些状态处理。

封装在Tools类中：

class Tools
{
    static asyncLoadScript(url, callback)
    {
        let old_script = document.getElementById(url);
        if (old_script)
        {
            if (old_script.ready == true)
            {
                // console.log("INFO:already load:" + url);
                callback();
                return;
            }
            else
            {
                document.body.removeChild(old_script);
                // console.log("INFO:remove an old script that not ready:" + url);
            }
        }
        let script = document.createElement('script');
        script.id = url;
        script.src = url;
        script.onload = script.onreadystatechange = function() {
            if (script.ready) {
                return false;
            }
            if (!script.readyState //这是FF的判断语句，因为ff下没有readyState这个值，IE的readyState肯定有值
                || script.readyState == "loaded" || script.readyState == 'complete' // 这是IE的判断语句
            ) {
                // console.log("INFO:load:" + url);
                script.ready = true;
                callback();
            }
        };
        document.body.appendChild(script);
    }

    static asyncLoadScripts(scripts, callback)
    {
        var ok = 0;
        for (var i=0; i < scripts.length; i++) {
            Tools.asyncLoadScript(scripts[i], function() {
                ok++;
                if (ok==scripts.length)
                {
                    callback();
                }
            })
        }
    }
}

export default Tools;

然后调用：

Tools.asyncLoadScripts(_dependScripts, function(){
    initView()
});