# React中几个核心的概念 ## 虚拟DOM（Virtual Document Object Model） ### DOM的本质是什么:（了解） >浏览器渲染引擎工作流程都差不多，大致分为5步，**创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting**    第一步，用HTML分析器，分析HTML元素，**构建一颗DOM树**(标记化和树构建)。     第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。     第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有**attach方法，接受样式信息**，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。     第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。     第五步，Render树和节点显示坐标都有了，就调用每个节点**paint方法，把它们绘制**出来。      **DOM树的构建是文档加载完成开始的？**构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。**它不必**等到整个HTML文档解析完毕之后才开始构建render数和布局。     **Render树是DOM树和CSSOM树构建完毕才开始构建的吗？**这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。     **CSS的解析是从右往左逆向解析的**(从DOM树的下－上解析比上－下解析效率高)，**嵌套标签越多，解析越慢。**  ### JS操作真实DOM的代价         用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。 例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。 ### 为什么需要虚拟DOM，它有什么好处?   Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，         虚拟DOM就是为了**解决浏览器性能问题**而被设计出来的。**如前**，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。**所以，**用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。 ### 实现虚拟DOM 例如一个真实的DOM元素如下 ```html <p title="段落">这是p标签</p> ``` ```javascript { name:'p', props:{ title:"段落" }, children:['这是p标签'] } ``` 再来描述下面的一个DOM ```html <p title="段落">这是p标签 <span>这是span标签</span></p> ``` 再来描述 ~~~html <p title="段落">这是p标签 <span>这是span标签</span></p> ~~~ ~~~javascript { name:'p',  props:{ title:"段落" }, children:['这是p标签', { name:'span', props:null, children:[’这是span标签‘] } ] } ~~~ 我们来想一个问题 我们之前是p标签里面有个span标签，那么我们后面把span标签删除后，虚拟dom是如何执行的？ 答: ```html <p title="段落">这是p标签 <span>这是span标签</span></p> ``` 当删除单击按钮时想要删除span标签，不会直接删除，而是先要生成右侧新的(删除掉span后)的虚拟DOM对象，和左侧的虚拟DOM对象作对比，发现只是少了span元素，那么它在操作真实DOM的时候会一次性将之前的span元素删除。  ## Diff算法 * tree diff:新旧DOM树，逐层对比的方式，就叫做 tree diff,每当我们从前到后，把所有层的节点对比完后，必然能够找到那些 需要被更新的元素； * component diff：在对比每一层的时候，组件之间的对比，叫做 component diff;当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置； * element diff:在组件中，每个元素之间也要进行对比，那么元素级别的对比，叫做 element diff； * key：key这个属性，可以把 页面上的 DOM节点 和 虚拟DOM中的对象，做一层关联关系；  参考资料： https://www.jianshu.com/p/af0b398602bc [http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html](http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html)