React虚拟DOM的理解

前端开发作者： 2024-08-19 21:25:01

React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其称为VNode，用对象属性来描述节点，实际上它是一层对真实DOM的抽象，最终可以通过渲

React虚拟DOM的理解

描述

<div class="root" name="root">
    <p>1</p>
    <div>11</div>
</div>

{
    type: "tag",tagName: "div",attr: {
        className: "root"
        name: "root"
    },parent: null,children: [{
        type: "tag",tagName: "p",attr: {},parent: {} /* 父节点的引用 */,children: [{
            type: "text",tagName: "text",content: "1"
        }]
    },{
        type: "tag",content: "11"
        }]
    }]
}

React中的虚拟DOM

React中的虚拟DOM的历史

$str = "<ul>";
foreach ($talks as $talk) {
  $str += "<li>" . $talk->name . "</li>";
}
$str += "</ul>";

$content = <ul />;
foreach ($talks as $talk) {
  $content->appendChild(<li>{$talk->name}</li>);
}

const content = (
  <TalkList>
    {talks.map(talk => <Talk talk={talk} />)}
  </TalkList>
);

// Chrome v84
const div = document.createElement("div");
let m = 0;
for (let k in div) m++;
console.log(m); // 294

维护一个使用Js对象表示的Virtual DOM，与真实DOM一一对应。
对前后两个Virtual DOM做diff，生成变更Mutation。
把变更应用于真实DOM，生成最新的真实DOM。

总结

虚拟DOM优缺点

优点

Virtual DOM在牺牲(牺牲很关键)部分性能的前提下，增加了可维护性，这也是很多框架的通性。
实现了对DOM的集中化操作，在数据改变时先对虚拟DOM进行修改，再反映到真实的DOM，用最小的代价来更新DOM，提高效率。
打开了函数式UI编程的大门。
可以渲染到DOM以外的端，使得框架跨平台，比如ReactNative，React VR等。
可以更好的实现SSR，同构渲染等。
组件的高度抽象化。

缺点

首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
虚拟DOM需要在内存中的维护一份DOM的副本，多占用了部分内存。
如果虚拟DOM大量更改，这是合适的。但是单一的、频繁的更新的话，虚拟DOM将会花费更多的时间处理计算的工作。所以如果你有一个DOM节点相对较少页面，用虚拟DOM，它实际上有可能会更慢，但对于大多数单页面应用，这应该都会更快。

@H_283_404@每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://zhuanlan.zhihu.com/p/99973075
https://www.jianshu.com/p/e0a3ac85db5c
https://www.jianshu.com/p/9a1d2750457f
https://github.com/livoras/blog/issues/13
https://juejin.cn/post/6844904165026562056
https://juejin.cn/post/6844903640512086029
https://zh-hans.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom