react如何使用服务器下载的js

Question

项目中一些算法js需要从服务器拿下来执行，而不是打包到项目中，这些js在react中如何使用呢？

···

class App extends React.Component{

componentDidMount(){
    fetch('js').then(...)
}

}
···

Answer 1

写一个简单的方法实现：

const getScript = (url: string) => {
   let script = document.createElement('script')
   script.src = url
   document.body.append(script)
   script.remove()
}
getScript('https://cdn.segmentfault.com/r-f575daa2/140.js')

Answer 2

可以参考📚《高性能JavaScript》第一章-动态脚本部分，书中提供了几种方式：

1.标准DOM函数创建：

var script = document.createElement ("script"); 
script.type = "text/javascript";
//Firefox, Opera, Chrome, Safari 3+ 会在<script>节点接收完成后触发load事件，来告知脚本已经准备好
script.onload = function(){ 
    alert("Script loaded!"); 
}; 
script.src = "file1.js"; 
document.getElementsByTagName_r("head")[0].appendChild(script);

2. 标准实现和IE实现封装

function loadScript(url, callback) {
  var script = document.createElement('script')
  script.type = 'text/javascript'
  if (script.readyState) {
    //IE
    script.onreadystatechange = function () {
      if (script.readyState == 'loaded' || script.readyState == 'complete') {
        script.onreadystatechange = null
        callback()
      }
    }
  } else {
    //Others
    script.onload = function () {
      callback()
    }
  }
  script.src = url
  document.getElementsByTagName_r('head')[0].appendChild(script)
}

使用：

loadScript("file1.js", function(){ 
    alert("File is loaded!");
});

3.xhr脚本注入

var xhr = new XMLHttpRequest()
xhr.open('get', 'file1.js', true)
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.text = xhr.responseText
      document.body.appendChild(script)
    }
  }
}
xhr.send(null)

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

方案有很多：

1. ESM
2. 模块 lazy-loading
3. 动态 import()
4. 动态插入 <script> 加载模块到全局
5. 甚至 jsonp