如何理解虚拟dom
Posted bbcfive
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何理解虚拟dom相关的知识,希望对你有一定的参考价值。
一、DOM对象和JS对象的区别
DOM对象是浏览器提供的前端api,相对于DOM 对象,原生的 javascript 对象处理起来更快,而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来:
var element = { tagName: ‘ul‘, // 节点标签名 props: { // DOM的属性,用一个对象存储键值对 id: ‘list‘ }, children: [ // 该节点的子节点 {tagName: ‘li‘, props: {class: ‘item‘}, children: ["Item 1"]}, {tagName: ‘li‘, props: {class: ‘item‘}, children: ["Item 2"]}, {tagName: ‘li‘, props: {class: ‘item‘}, children: ["Item 3"]}, ] }
上面js对应的html写法是:
<ul id=‘list‘> <li class=‘item‘>Item 1</li> <li class=‘item‘>Item 2</li> <li class=‘item‘>Item 3</li> </ul>
因此,原生的DOM树可以用js对象来表示,反过来,js对象也可以构建出虚拟的DOM树。
“这就是所谓的 Virtual DOM 算法。包括几个步骤:
- 用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
- 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
- 把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了
Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。”
这是相关的算法实现。
二、最终虚拟dom的实现过程:
// 1. 构建虚拟DOM var tree = el(‘div‘, {‘id‘: ‘container‘}, [ el(‘h1‘, {style: ‘color: blue‘}, [‘simple virtal dom‘]), el(‘p‘, [‘Hello, virtual-dom‘]), el(‘ul‘, [el(‘li‘)]) ]) // 2. 通过虚拟DOM构建真正的DOM var root = tree.render() document.body.appendChild(root) // 3. 生成新的虚拟DOM var newTree = el(‘div‘, {‘id‘: ‘container‘}, [ el(‘h1‘, {style: ‘color: red‘}, [‘simple virtal dom‘]), el(‘p‘, [‘Hello, virtual-dom‘]), el(‘ul‘, [el(‘li‘), el(‘li‘)]) ]) // 4. 比较两棵虚拟DOM树的不同 var patches = diff(tree, newTree) // 5. 在真正的DOM元素上应用变更 patch(root, patches)
参考文献:https://www.zhihu.com/question/29504639/answer/73607810
以上是关于如何理解虚拟dom的主要内容,如果未能解决你的问题,请参考以下文章