关于React中的几个核心概念

React中几个核心的概念

虚拟DOM

• DOM的本质：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API；
• 虚拟DOM：框架中的概念，是程序员用JS对象来模拟 页面上的DOM和DOM嵌套；
• 虚拟DOM的目的：为了实现页面中，DOM元素的高效更新；
• DOM和虚拟DOM的区别：

•    DOM:浏览器中提供的概念，用JS对象，表示页面上的元素，并提供操作元素的API；
  

•    虚拟DOM：框架中的概念，是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；
  

• DOM 树：
  一个网页呈现的过程：
  1.浏览器请求服务器获取页面HTML代码；
  2.浏览器在内存中，解析DOM结构，并在浏览器内存中，渲染出一棵DOM树；
  3.浏览器把DOM树，呈现到页面上；

Diff算法

• tree diff:

  新旧两棵DOM树，逐层对比的过程；当整棵DOM树逐层对比完毕，则所有需要被按需更新的元素，必然能够找到；

• component diff：

  在进行Tree diff 时，每一层中组件级别的对比过程;

  • 如果对比前后，组件的类型相同，则暂时认为组件不需要被更新；
  • 如果对比前后，组件的类型不同，则需要移除旧组件，创建新组件，并追加到页面上；

• element diff:

  在进行组件对比时，如果两个组件类型相同，则需要进行元素级别的对比；