Multi React root DOM node

multi-react-root-dom-nodes.md

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')
);

Rendering an Element into the 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>

const element = <h1>Hello, world</h1>;
const elements =  (
        <div>
        <h1>https://codepen.io/gaearon/pen/rrpgNB?editors=0000</h1>
        <h1>https://facebook.github.io/react/docs/rendering-elements.html#rendering-an-element-into-the-dom</h1>
       </div>
    );
ReactDOM.render(
  element,
  document.getElementById('root')
);

ReactDOM.render(
  elements,
  document.getElementById('root2')
);

https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up

https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react

https://gist.github.com/xgqfrms-GitHub/83f022cd3274d923a1adb7cb33a69605

virtual dom & DocumentFragment & insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

DocumentFragment 接口表示表示一个没有父级文件的最小文档对象。

https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

let docFragment = document.createDocumentFragment();

// assuming it exists (ul element)

let ul = document.getElementsByTagName("ul")[0],
    docfrag = document.createDocumentFragment();

const browserList = [
    "Internet Explorer", 
    "Mozilla Firefox", 
    "Safari", 
    "Chrome", 
    "Opera"
];

browserList.forEach((e) => {
    let li = document.createElement("li");
    li.textContent = e;
    docfrag.appendChild(li);
});

ul.appendChild(docfrag);

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

element.insertAdjacentHTML(position, text);


<!-- beforebegin -->
    <p>
        <!-- afterbegin -->
        foo
        <!-- beforeend -->
    </p>
<!-- afterend -->

https://gist.github.com/xgqfrms-gildata/f2b41a63feb21081e9f51d464d7434d7#gistcomment-2134601