新增div标签后React组件停止响应问题排查

核心错误是*index.html中重复引入了两次index.js脚本，且脚本位置放置错误*，执行逻辑如下：

• 浏览器解析到第一个<script>标签加载index.js时，会立刻执行脚本内的代码：
  • 第一个ReactDOM.render调用可以找到已解析的#input节点，成功挂载<Input />组件
  • 第二个ReactDOM.render调用执行时，#disp节点还未被浏览器解析（节点位于当前script标签的后方），document.getElementById('disp')返回null，Display组件挂载失败，此时仅Input组件可正常交互，和你仅保留第一个组件时的表现一致
• 浏览器继续向下解析到#disp节点后，会加载执行第二份index.js脚本：
  • 脚本重复执行会冲掉React内部维护的上一轮组件实例、事件监听绑定、状态缓存
  • 第一个render调用会强制重挂载已经正常运行的Input组件，打断原有交互逻辑
  • 第二个render调用虽然能成功挂载Display组件，但两轮脚本执行的上下文冲突会导致两个组件的事件响应全部失效

index.js内的挂载逻辑本身没有问题，只需要调整index.html的结构即可：

• 删除重复的index.js脚本引入，整个页面只保留一次该脚本的引用
• 将唯一的脚本标签移动到所有待挂载DOM节点的后方、</body>闭合标签之前，保证脚本执行时所有需要挂载的目标节点都已经被浏览器解析完成

修正后的index.html代码如下：

<body>
  <div id="input"></div>
  <div id="disp"></div>
  <script type="text/javascript" src="./index.js"></script>
</body>

调整后刷新页面，两个组件都可以正常挂载、响应交互。

内容的提问来源于stack exchange，提问作者Isaac Martinez Jr. Mora