React中的核心概念

React中几个核心的概念

• 虚拟DOM（Virtual Document Object Model）

  • DOM的本质是什么：就是用JS表示的UI元素
  • DOM和虚拟DOM的区别：DOM是由浏览器中的JS提供功能，所以我们只能人为的使用 浏览器提供的固定的API来操作DOM对象；虚拟DOM并不是由浏览器提供的，而是我们程序员手动模拟实现的，类似于浏览器中的DOM，但是有着本质的区别
  • 虚拟DOM：优化频繁操作DOM引发性能问题的产物，将页面的状态抽象为JS对象的形式，本质上是JS和真实DOM的中间层。当我们想用JS脚本大批量进行DOM操作时，会优先作用于虚拟DOM这个JS对象，最后通过对比将要改动的部分通知并更新到真实的DOM上。

• Diff算法

• tree diff:新旧DOM树，逐层对比的方式，就叫做 tree diff,每当我们从前到后，把所有层的节点对比完后，必然能够找到那些 需要被更新的元素；

• component diff：在对比每一层的时候，组件之间的对比，叫做 component diff;当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置；

• element diff:在组件中，每个元素之间也要进行对比，那么，元素级别的对比，叫做 element diff；

• key：key这个属性，可以把 页面上的 DOM节点 和 虚拟DOM中的对象，做一层关联关系；
  

• React的组件：和Vue中的组件一样，抽离出页面中的公共部分，提高代码的复用性