傳統網頁在進行更新的時候會有乙個很棘手的問題，那就是需要用繁雜的domapi去操作
dom，很容易出現bug且難以維護，對於如何從這種繁雜的dom操作中脫離出來，react提出了乙個新的思想，-始終整體重新整理頁面，當資料發生變化時，react會自動更新ui, 從而讓我們只關心資料以及最後ui是什麼樣子。
這種方式雖然簡單，但是有乙個很明顯的問題，慢。每次資料改變就重新渲染整個頁面會做大量的「無用功」，而且無法儲存節點狀態，比如失去焦點，為了解決這個問題，react又提出了乙個解決方案，就是虛擬dom以及diff演算法。react根據原生dom節點數建立了乙個虛擬dom，每次ui狀態改變時生成新的虛擬dom， 與原來的相比對，對於沒有改變的節點，讓其保持原樣不動，只建立並替換發生改變的dom節點。
完整的樹形結構的diff演算法的時間複雜度為on的三次方，這個時間複雜度太高了，facebook工程師經過優化，將複雜度降低到on(diff演算法的厲害之處在這裡),至此，react更新ui的操作大致分為以下三步：
維護乙個使用js物件表示的虛擬dom，與真實dom相對應。
ui狀態發生改變時，將新舊兩個dom做diff
更新發生變化的真實dom
可以看出，最後還是要操作真實dom的，所以仔細思考一下，其實虛擬dom並不會比真實操作dom效率高，反而會低。虛擬dom是為了解決宣告式程式設計以及資料驅動所帶來的dom操作的效能問題。diff演算法也是要消耗效能的，而我們傳統直接操作dom的方法是有的放矢，我們知道該更新哪個dom，所以不需要比較過程，所以直接操作dom的效率可能更高。
react的厲害之處不是說它比直接操作dom快，而是在宣告式程式設計的方式下，無論資料怎麼變化，都能以最小的代價更新dom。
像react和vue之類的框架，其目的在於幫你掩蓋底層的dom操作，讓你用宣告式的方式來描述你的目的，只專注於資料的變化。沒有任何框架可以比直接手動操作dom快，框架更新dom的操作必須要能夠應對所有上層api的操作，其實現必須是普適的。
React 中的虛擬DOM
react 的重新渲染，效能是很高的。因為它引入了虛擬dom的概念。呃，來看一下，render 函式渲染頁面的幾種做法。前兩步都是拿到state 資料 與 jsx模版。第一種就是比較樸素的方式。第二種方式雖然不用完全替換，但是也需要比對兩個dom。第三種是虛擬dom方式。虛擬dom 本質上就是 js...
react中的虛擬DOM
資料驅動原理 用虛擬dom 1.state資料 2.jsx模板 3.資料 模板相結合，生成虛擬dom 虛擬dom就是乙個js物件，用它來描述真實的dom div span hello 損耗了極小的效能 4.用虛擬dom的結構生成真實的domhello 5.state 發生變化 6.資料 模板 生成新...
React虛擬DOM轉換為真實DOM
按照上面的猜想，那麼render方法的作用就是 render方法接收兩個引數，第二個引數沒什麼好說的，固定寫法，第乙個引數有以下幾種情況 類元件函式元件 文字 數字 class extends component 然後再來處理函式元件，函式元件的寫法是,直接就返回了dom 對於文字 數字，直接新增到...