react的學習筆記

React中幾個核心的概念
### 虛擬DOM（Virtual Document Object Model）
+ **DOM的本質是什麼**：瀏覽器中的概念，用JS對象來表示 頁面上的元素，並提供了操做 DOM 對象的API；
+ **什麼是React中的虛擬DOM**：是框架中的概念，是程序員 用JS對象來模擬 頁面上的 DOM 和 DOM嵌套；
+ **爲何要實現虛擬DOM（虛擬DOM的目的）：**爲了實現頁面中， DOM 元素的高效更新
+ **DOM和虛擬DOM的區別**：
+ **DOM：**瀏覽器中，提供的概念；用JS對象，表示頁面上的元素，並提供了操做元素的API；

+ **虛擬DOM：**是框架中的概念；而是開發框架的程序員，手動用JS對象來模擬DOM元素和嵌套關係；

+ 本質： 用JS對象，來模擬DOM元素和嵌套關係；
+ 目的：就是爲了實現頁面元素的高效更新；

 

Diff算法
- **tree diff:**新舊兩棵DOM樹，逐層對比的過程，就是 Tree Diff； 當整顆DOM逐層對比完畢，則全部須要被按需更新的元素，必然可以找到；

- **component diff：**在進行Tree Diff的時候，每一層中，組件級別的對比，叫作 Component Diff；

- 若是對比先後，組件的類型相同，則**暫時**認爲此組件不須要被更新；
- 若是對比先後，組件類型不一樣，則須要移除舊組件，建立新組件，並追加到頁面上；

- **element diff:**在進行組件對比的時候，若是兩個組件類型相同，則須要進行 元素級別的對比，這叫作 Element Diff；

 

 

使用

1導入包裹

2建立虛擬dom

3調用render函數渲染

 

JSX語法

> 什麼是JSX語法：就是符合 xml 規範的 JS 語法；（語法格式相對來講，要比HTML嚴謹不少）

 **jsx 語法的本質：**並非直接把 jsx 渲染到頁面上，而是 內部先轉換成了 createElement 形式，再渲染的；