React环境下能否将根节点div id="root"替换为body标签？

结论先行 #

不建议将React挂载根节点替换为<body>标签，具体原因和优化方案如下：

1. 报错原因 #

React本身限制直接挂载到document.body：浏览器运行过程中，第三方脚本、浏览器扩展、广告插件等都可能动态向<body>插入或修改DOM节点，而React依赖虚拟DOM和实际DOM的一致性做差分更新，外部修改会导致React渲染逻辑混乱，因此React对挂载到<body>的行为做了拦截，会直接抛出错误。

2. 语义化规范认知修正 #

语义化标签嵌套在普通<div>内不符合规范的说法是错误的。
<div>属于无语义的通用分组标签，本身的作用就是对节点做分组包装，不会干扰内部语义化标签的语义表达。只要你没有用<div>替代<header>/<section>/<footer>这类有明确语义的标签，仅用<div>做外层容器完全符合W3C语义化规范要求。

3. 正确的优化方案 #

不需要修改根挂载节点，只需要调整你App组件内的冗余结构即可：
你当前结构中div#root内部还有一层无意义的<div>，直接将这层<div>删除或者替换为语义化的<main>标签，最终结构如下就完全符合要求：

<body>
 <div id="root">
    <Header></Header>
    <main>
      <Section></Section>
    </main>
    <Footer></Footer>
 </div>
</body>

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