在React中集成jQuery插件时为何需用空div包裹DOM元素？

为什么不包裹<select>时，手动追加的input没被删除？ #

React的DOM更新逻辑只负责它自己渲染出来的DOM节点及其子节点，不会处理渲染节点的兄弟节点。当你直接把<select>作为组件根元素渲染时，React的虚拟DOM树里只有这个<select>，重渲染时只会对比<select>本身的属性、内部<option>的变化，完全不会关心<select>后面被手动追加的input——因为这个input不在React的虚拟DOM管辖范围内，所以React根本不会去删除它。

文档要求包裹<div>的核心原因 #

官方文档提到的冲突，不是指React会删掉Chosen追加的DOM，而是指React重渲染时可能替换原<select>元素，导致Chosen的绑定失效，同时残留旧的Chosen DOM节点：

• Chosen插件的工作逻辑是：隐藏原<select>，在它后面生成自定义下拉DOM（比如带搜索框的容器），并把事件、状态和原<select>绑定。
• 如果不包裹<div>，当React因state/props变化重渲染时，有可能完全卸载旧的<select>，再渲染一个新的<select>（比如组件key变化、父组件重渲染导致子组件重建）。这时旧的Chosen DOM还绑定在被卸载的<select>上，新的<select>没有被Chosen初始化，就会出现“原下拉消失、自定义下拉失效”的混乱情况。
• 用<div>包裹<select>后，React重渲染时只会更新<div>内部的<select>（不会替换整个<div>），Chosen追加的DOM作为<div>的子节点存在，只要我们在componentDidMount和componentDidUpdate里正确初始化/更新Chosen状态，就能让Chosen和新的<select>保持绑定，避免DOM混乱。

包裹<div>的具体差异 #

• 管辖范围更清晰：React认为<div>的子元素只有它渲染的<select>，但Chosen会在<div>里追加同级DOM，不过React不会主动删除这些额外DOM（它只对比自己渲染的内容），我们可以通过组件生命周期方法手动管理Chosen生成的DOM。
• 避免<select>被完全替换：<div>作为稳定的父容器，重渲染时不会被卸载，里面的<select>只会被更新属性/子元素，而非完全替换，这样Chosen的绑定关系可通过后续初始化/更新逻辑维持。
• 符合React DOM管理原则：把第三方插件的DOM放在React可控的父容器里，方便在组件卸载时清理Chosen的事件监听和生成的DOM，避免内存泄漏。

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