Question

如果我通过id直接在文档正文中插入React组件可以吗？

还是最好将其包装在DIV中？

index.js

ReactDOM.render(
    <Provider store={store()}>
        <App/>
    </Provider>,
    document.querySelector("#root")
)

index.html

<body class="d-flex flex-column h-100" id="root">
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>

Answer 1

出于以下三个原因，我不建议使用body作为虚拟DOM的根：

body通常包含脚本标签，其中可能包含您的React逻辑。重新渲染body意味着您还需要照顾好所有脚本，并且每次重新渲染body时，都需要重新加载所有脚本，这效率不高，更不用说了重新加载React代码的副作用（我没有任何经验可以证明）。避免这种情况的唯一方法是将所有脚本放入header，which is not recommended中。
如果您需要修改body，例如如果使用Bootstrap modal，则添加“ modal-open”类，还有其他解决方案，例如using React's hook或专用于更新主体的事件监听器。
通常，Web应用程序产品不仅使用DOM操作器脚本，还使用其他用于商业目的的脚本（例如Google Analytics（分析），Analytics.js，Google Map）。有些应用包含超过1个独立运行的React脚本。在那些情况下，脚本逻辑应该分开并且不要耦合在一起。如果有2个React脚本，则不应嵌套2个根节点，以避免不必要的重新渲染。

Answer 2

在我的html页面中，我只使用一个<div id="root">

之后：

ReactDOM.render(element, document.getElementById('root'));

做所有的魔术。