![](https://csdnimg.cn/release/download_crawler_static/87869952/bg1.jpg)
面试官:说说 Real DOM 和 Virtual DOM 的区别?优缺点?
一、是什么
Real DOM,真实
DOM,意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是
一个真实 DOM 结构,如下:
Virtual Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述
创建虚拟 DOM 目的就是为了更好将虚拟的节点渲染到页面视图中,虚拟 DOM
对象的节点与真实 DOM 的属性一一照应
在 React 中,JSX 是其一大特性,可以让你在 JS 中通过使用 XML
的方式去直接声明界面的 DOM 结构
// 创建 h1 标签,右边千万不能加引号
const vDom = <h1>Hello World</h1>;
// 找到 <div id="root"></div> 节点
const root = document.getElementById("root");
// 把创建的 h1 标签渲染到 root 节点上
ReactDOM.render(vDom, root);
上述中,ReactDOM.render() 用于将你创建好的虚拟 DOM
节点插入到某个真实节点上,并渲染到页面上