React中异步引入script标签 reactor 异步

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

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

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

这样调用Tools.asyncLoadScripts(scripts, callback)所有标签就会加载到Dom中(无序加载，加载完所有的就会callback)。

封装在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;