ReactDOM.render和ReactDOM.createPortal

Posted 2023-05-07

参考技术A 都是在提供的 container 里渲染 React 元素，第一个参数 child 或 element 是任何可渲染的 React 元素。第二个参数 container 是一个 真实的 DOM 元素。
主要的区别在于：
（1）ReactDOM.render在首次调用时，会将容器节点里的所有DOM元素都替换，ReactDOM.createPortal是向container下插入一个子节点；
（2） ReactDOM.render 会直接渲染成DOM元素，而 ReactDOM.createPortal 则是渲染出React元素，最终还是需要通过ReactDOM.render渲染成真实DOM；

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘example‘)
);

上面代码将一个 h1 标题，插入 example 节点（查看 demo01），运行结果如下。