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;