React (2) 核心概念

1.  虚拟 DOM (Virtual Document Object Model)

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

• DOM和虚拟DOM的区别:

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

  虚拟DOM : 虚拟DOM就是一个JS对象, 用它来描述真实DOM

  例 : 

  <div id='abc'><span>hello world</span></div>
  生成虚拟DOM
  ['div',{id:'abc'}, ['span',{},'hello world']]
             

    本质 : 用JS对象, 来模拟 DOM 元素和嵌套关系

    目的 : 是为了实现页面元素的高效更新

2.  diff

• tree diff : 新旧两颗DOM树,  逐层对比的过程,  就是 Tree Diff ; 对比完成, 找出需要更新的元素;
• component diff : 在进行 Tree Diff 的时候,  每一层中, 组件级别 的对比, 叫做 Component Diff;
• element diff : 组件中, 元素级别 的对比, 叫做 element diff;