參考：
1、dom的本質： 瀏覽器中的概念，用js物件來表示頁面上的元素，並提供操作dom物件的api
2、react中的虛擬dom：是框架中的概念，是程式設計師用js物件來模擬頁面上的dom和dom 的巢狀
3、為什麼要實現虛擬dom：為了實現頁面中dom元素的高效更新
4、dom和虛擬dom的區別：
定義state資料
定義模板，即對應於react框架中render函式裡返回的jsx**部分
資料+模板，結合生成真實dom並顯示
state改變後
資料+模板，結合生成真實dom替換原始dom
缺陷：
第一次生成完整dom片段
第二次生成完整dom片段
第二次替換第一次dom
極其損耗效能，因為每次都需要重新渲染整個dom，但事實往往只有一部分dom元素改變
定義state資料
定義模板，即對應於react框架中render函式裡返回的jsx**部分
資料+模板，結合生成真實dom並顯示
state改變後
資料+模板，結合生成真實dom，但不直接替換原始dom新舊dom片段做對比，找出差異
只拿變化的dom替換原始dom
缺陷：
新舊dom片段做對比，找出差異，依舊會損耗效能，效能提公升不明顯
定義state資料
定義模板，即對應於react框架中render函式裡返回的jsx**部分
資料+模板，結合生成真實dom並顯示
>
1111
>
2222p
>
div>
生成虛擬dom，即乙個js物件，用來描述真實dom（損耗效能，但相對生成新的真實dom元素還是比較節省的）
p標籤內容變為「3333」資料+模板，生成新的虛擬dom（極大提公升效能）
}
直接操作dom，改變p標籤中的內容
定義state資料
jsx模板
資料+模板，結合生成生成虛擬dom
比較新舊dom的區別>資料+模板，生成新的虛擬dom（極大提公升效能）1111
>
2222p
>
div>
state變化後，假設p標籤內容變為「3333」
}
直接操作dom，改變p標籤中的內容
因此，在render函式中，標籤並不是真實標籤，而是虛擬dom。整個的過程是：jsx -> react.createelement -> js物件（虛擬dom）-> 真實dom
提公升效能
尋找原始虛擬dom和新的虛擬dom差異的演算法
比對方法：同層比對
過程：
（1）react通過updatedepth對virtual dom樹進行層級控制。
（2）對樹分層比較，兩棵樹只對同一層次節點 進行比較。如果該節點不存在時，則該節點及其子節點會被完全刪除，不會再進一步比較。
（3）只需遍歷一次，就能完成整棵dom樹的比較。
特點：如果只有根節點相同，則會渲染所有子節點，會有效能損耗，但演算法簡單，比對速度快
關於key值的設定------為何在元件迴圈渲染時要設定key值？
對於每個元件，如果設定了乙個key值，就能直接通過key值來比對其value相對於原始value是否改變，提公升了效能。
關於key值的設定------為何在元件迴圈渲染時不能用下標作為key值？
舉個栗子，迴圈需要渲染乙個list的內容成為三個元件，內容分別是：
a，b，c0
-->a,1--
>b,2--
>c
0
-->b,1--
>c
setstate不會立刻改變react元件中state的值.
setstate通過觸發一次元件的更新來引發重繪.
多次setstate函式呼叫產生的效果會合併。
重繪指的就是引起 react 的更新生命週期函式4個函式：
目前react會將setstate的效果放在佇列中，積攢著一次引發更新過程。為的就是把 virtual dom 和 dom 樹操作降到最小，用於提高效能。
深入理解List集合框架
前言 講講什麼是集合框架？集合框架是為表示和操作集合而規定的一種統一的標準的體系結構。任何集合框架都包含三大塊內容 對外的介面 介面的實現和對集合運算的演算法。沒學集合框架之前我們儲存多個資料是採用陣列實現的，但是我們要建立陣列的話先要初始化陣列容量 int arr new int 10 現在設定陣...
深入理解springboot日誌框架
一 springboot預設日誌框架 我們先檢視一下springboot專案的日誌jar包依賴 二 springboot日誌架構的切換 接下來介紹日誌框架的切換，以logback切換成log4j為例，我們看一下springboot官方提供的日誌使用圖 檢視右上角的流程，可以看出，我們面向slf4j ...
d3js data joins深入理解
給定乙個資料陣列和乙個 d3 selection 我們就可以attach或者說是 join 陣列中的每個資料到selection中的每個元素上。這將使得我們的資料和視覺化元素之間建立緊密的聯絡並實現視覺化成為可能。比如如果我們有以下svg的circles 和下面的data陣列 var scores ...