React本身只是一个DOM的抽象层，使⽤组件构建虚拟DOM
首先来看，什么是Virtual DOM
简单来说，Virtual DOM本身只是一个js对象
进一步说，Virtual DOM是一种编程概念，我们使用js对象描述真实的DOM节点。当这个真实的DOM节点需要变化时，我们先去更改js对象，然后通过这个js对象来同步更改DOM节点。这个过程我们称之为协调。协调的核心：diff
Fiber是React16中新增的协调引擎。它的目的是使Virtual DOM可以进行增量式渲染
为什么使用Virtual DOM
简单来说，使用Virtual DOM性能高
原因是DOM操作很慢，轻微的操作都可能导致页面重排，非常消耗性能。相对于DOM对象，js对象处理起来更快，而且更简单。通过diff算法比对新旧vdom之间的差异，可以批量的、最小化的执行dom操作，从而提高性能。
其实真实DOM也是一个对象，但是非常大。如下，将div标签对应的真实DOM odiv的key值打出来
<body>
<div></div>
</body>
<script>
let odiv = document.getElementsByTagName('div')[0]
let str = ''
for (const key in odiv) {
str += ' ' + key
}
console.log(str)
</script>
可以看见，原生dom节点非常庞大。如果直接diff这个对象，那成本太高了
那在React中，如何使用了Virtual DOM
React中可以使用JSX语法描述视图，通过babel-loader转译后它们变成React.createElement(...)形式，该函数将生成vdom来描述真实dom。将来如果发生状态变化，vdom将作出相应变化，再通过diff算法比对新老vdom区别，从而做出最终dom操作
以上是关于React Virtual DOM的简单理解
网友评论