我正在参与掘金创作者训练营第6期，点击了解活动详情
React中的Virtual DOM
下面是React官网的介绍：
为什么要使用VDom？
避免回答 真实DOM操作慢，VDOM操作快，所谓的性能问题。这样回答几乎可以pass
var div = document.createElement('div')
var str = ''
for (var key in div) {
str += ' ' + key
}
console.log(str)
下面是真实DOM对应的属性
虚拟DOM的理解
- 操作真实DOM其实是避免不了的，既然避免不了。那么我们就可以通过计算的方式，来最小成本来更新DOM节点。DOM操作比较慢，当出现重回重排的时候，非常消耗性能。相对于DOM对象，js对象处理起来更快，而且简单。通过diff算法对比新旧vdom之间的差异，可以批量的、最小化的执行dom操作，从而提升用户体验。
- 方便实现跨平台，包括你可以将VNode节点渲染成任意你想要的节点，如渲染在canvas、WebGL、SSR、Native（iOS、Android）上；
- JavaScript 对象，用最小程度的表示DOM的信息和结构。当状态变更的时候。重新渲染这个JavaScript对象结构。避免操作真实DOM的消耗。
什么是 “React Fiber”？
Fiber 是 React 16 中新的协调引擎。它的主要目的是使 Virtual DOM 可以进行增量式渲染。
1.为什么需要fiber
对于大项项目，组件树会很大。这个时候递归遍历的成本比较高，会造成主进程持续被占用，会导致主进程上的布局、动画等周期性任务就无法立即得到处理，造成视觉上面的卡顿，影响用户体验。
2.什么是Fiber
官方的解释：
官方的一句话解释是“React Fiber是对核心算法的一次重新实现”。Fiber 架构调整很早就官宣了，但官方经过两年时间才在V16版本正式发布。官方概念解释太笼统， 其实简单来说 React Fiber 是一个新的任务调和器（Reconciliation）简称协调
a fiber is a JavaScript object that contains information about a component, its input, and its output.
本质上面还是 VDOM，新的数据结构。
3.总结
1.任务分解的意义，避免主线程的持续占用造成卡顿问题
2.增量渲染（把渲染任务拆分，均匀到多帧中处理）
3.更新时能够暂停，终止，复用渲染任务。
4.给不同类型的更新赋予优先级
5.并发方面新的基础能力/更流畅
