https://codepen.io/gaearon/pen/rrpgNB?editors=1010
https://facebook.github.io/react/docs/rendering-elements.html#rendering-an-element-into-the-dom
Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
使用React构建的应用程序通常具有单个根DOM节点。如果您将React集成到现有应用程序中,则可能需要像您所需的一样多的孤立根DOM节点。
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>
<div id="root2">
<!-- This element's contents will be replaced with your component. -->
</div>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root2')
);
virtual dom & DocumentFragment & insertAdjacentHTML
https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
https://stackoverflow.com/questions/16126960/what-is-the-difference-between-appendchild-insertadjacenthtml-and-innerhtml
insertAdjacentHTML
&insertAdjacentElement
&insertAdjacentText
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText
https://gist.github.com/xgqfrms-gildata/f2b41a63feb21081e9f51d464d7434d7#gistcomment-2134601