虚拟DOM原理

您所在的位置：网站首页 › 虚拟dom有哪些属性和特征 › 虚拟DOM原理

虚拟DOM原理

#虚拟DOM原理| 来源: 网络整理| 查看: 265

一、什么是虚拟DOM

虚拟DOM就是虚拟节点。React用JS对象来模拟DOM节点，然后将其渲染成真实的DOM节点，因此虚拟DOM的本质是JS对象。

虚拟 DOM 就是用来模拟 DOM 的一个对象，这个对象拥有一些重要属性，并且更新 UI 主要就是通过对比（diff）旧的虚拟 DOM 树和新的虚拟 DOM 树的区别完成的。

二、如何实现虚拟DOM 第一步：模拟

用JSX 语法写出来的div其实就是一个虚拟节点：

这段代码会得到这样一个对象，这个对象有一些重要的属性tag,props,children：

{ tag: 'div', props: { id: 'x' }, children: [ { tag: 'span', props: { className: 'red' }, children: [ 'hi' ] } ] }

以上代码的转换是因为，JSX 语法会被转译为React.createElement函数调用（也叫 h 函数），如下：

React.createElement("div", { id: "x"}, React.createElement("span", { class: "red" }, "hi") ) 第二步：将虚拟节点渲染为真实节点

其过程就是根据JS对象已有的重要属性（tag,props,children）去依次创建真实的DOM并返回

function render(vdom) { //传入虚拟DOM节点 if (typeof vdom === 'string' || typeof vdom === 'number') { return document.createTextNode(vdom) } const { tag, props, children } = vdom const element = document.createElement(tag) setProps(element, props) children .map(render) .forEach(element.appendChild.bind(element)) vdom.dom = element return element // 返回真实的DOM 节点 } 节点更新

如果节点发生变化，并不会直接把新的虚拟节点渲染到真实节点，而是先经过 diff 算法得到一个 patch ，再更新到真实节点上，详细内容请查看我的另一篇DOM diff 算法。

三、虚拟DOM解决了什么问题 DOM 操作性能问题。通过虚拟 DOM 和 diff 算法减少不必要的 DOM 操作，DOM 操作较慢，频繁变动 DOM 会造成浏览器的回流，因此我们需要 diff 后中尽可能一次性将差异更新到真实的 DOM 上。 DOM 操作不方便问题。DOM API 统一换成使用 setState 四、优点为 React 带来了跨平台能力，因为虚拟节点除了渲染为真实节点，还可以渲染为其他东西。让 DOM 操作的整体性能更好，能通过 diff 减少不必要的 DOM 操作。五、缺点性能要求极高的地方，还是得用真实 DOM 操作。 React 为虚拟 DOM 创造了合成事件，跟原生 DOM 事件不太一样，需要额外注意（比如 React 自动实现了事件委托，对元素的操作都绑定到根元素上）

【本文地址】

虚拟DOM原理

虚拟DOM原理

今日新闻

推荐新闻