ReactDOM.render 导致 Chrome 调试 React 卡住答案

【问题标题】：ReactDOM.render cause Chrome debug React stuckReactDOM.render 导致 Chrome 调试 React 卡住
【发布时间】：2021-01-18 20:01:55
【问题描述】：

我正在尝试使用 WebStorm 和 VSCode 来调试 React，它们都有这个问题。

我正在使用以下简单的 React 代码，但 Chrome 调试卡住了。

如何重现：

观看我的视频 (attached file in this ticket)
在ReactDOM.render 中设置断点
点击F4用idea内置的webserver调试html
点击 WebStorm 调试工具窗口 -> 在浏览器中重新加载
Debug 卡住和 WebStorm 调试工具窗口 -> "restart" 无法重新启动调试（Chrome 调试选项卡也卡住无法重新加载）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
</head>
<body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>
<script>
  class App extends React.Component {
  }

  const domContainer = document.querySelector('#root');
  ReactDOM.render(React.createElement(App), domContainer);
</script>
</body>
</html>

我也在React GitHub page 报告了这个问题，这是一个非常严重的问题，因为我很难做出反应。

【问题讨论】：

标签： javascript reactjs intellij-idea visual-studio-code webstorm

【解决方案1】：

更新：

后面加“beforeunload”比较麻烦，需要在项目中添加“beforeunload”代码

更好的方法是制作webstorm或vs插件，使用“chrome devtools协议”，在刷新之前运行js“ReactDOM = null”

更新：

简而言之，解决方案是添加以下

 window.addEventListener("beforeunload", function(event) {
            ReactDOM = null
        });

这个bug在最新的chrome中仍然存在，这里是issue

我找到了 tmp 解决方案

刷新前，在运行时运行js "ReactDOM = null" 然后刷新就不会卡住了

这是我的代码：

window.addEventListener("beforeunload", function(event) {
        ReactDOM = null
    });

ReactDOM.render(app, domContainer);

卡住的原因是：

反应代码：

  function unbatchedUpdates(fn, a) {
    var prevExecutionContext = executionContext;
    executionContext &= ~BatchedContext;
    executionContext |= LegacyUnbatchedContext;

    try {
      return fn(a);
    } finally {
      executionContext = prevExecutionContext;

      if (executionContext === NoContext) {
        // Flush the immediate callbacks that were scheduled during this batch
        flushSyncCallbackQueue();
      }
    }
  }

flushSyncCallbackQueue导致这个错误

旧：我在here给出答案

简而言之，使用chrome扩展api“结束进程”当前标签进程然后重新加载，这意味着即使在调试卡住的情况下也要强制重新加载

【讨论】：