如何终止已移除元素对应的仍在运行的JS代码？React场景解惑

React开发里第一个典型难点就是：页面不会像传统多页应用那样重新加载，像setInterval、WebSocket这类一旦启动就持续运行的脚本，就算对应的页面元素已经被移除，代码依然会继续执行。

下面的示例清晰展示了这种情况——点击「生成新JS代码」会创建一个包含定时日志的<script>元素，点击「移除JS代码」会删掉这个元素，但控制台依然会持续输出时间戳，可见代码还在运行。而用全局变量的方式来处理这个问题，效果并不好：

<button onclick="createNewJsCode()">生成新JS代码</button>
<button onclick="removeJsCode()">移除JS代码</button>
<script>
  let id = ''
  function createNewJsCode(){
    let s = document.createElement('script')
    let code = 'setInterval(`console.log(new Date())`,500)'
    s.id = (id = crypto.randomUUID())
    s.appendChild(document.createTextNode(code));
    document.body.appendChild(s);
  }
  function removeJsCode(){
    document.getElementById(id).remove()
  }
</script>

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