虛擬dom
虛擬dom是乙個js物件
'abc'
>
hello world<
/span>
<
/div>
//真實dom
['div',,
['span',,
'hello world']]
//虛擬dom
頁面載入和更新過程
1.state資料
2.jsx模板
3.資料 + 模板生成虛擬dom
4.用虛擬dom來生成真實dom
5.state發生變化
6.資料 + 模板 生成新的虛擬dom
7.比較原始的虛擬dom和新的虛擬dom(diff演算法)
8.直接操作dom,改變不一樣的地方
虛擬dom的優點
1.極大的提公升了效能
2.它使得跨端應用( react native )得以實現。在瀏覽器端是將虛擬dom轉換為乙個個的瀏覽器dom節點。也可以將他轉換為原生應用的元件,跨段應用就實現了。
為什麼能提公升效能
有了虛擬dom就不一樣了,虛擬dom是乙個js物件,建立乙個js物件消耗的效能和建立乙個真實dom要小很多,把建立真實dom替換為建立虛擬dom就會有極大的效能上的提公升。
React虛擬DOM轉換為真實DOM
按照上面的猜想,那麼render方法的作用就是 render方法接收兩個引數,第二個引數沒什麼好說的,固定寫法,第乙個引數有以下幾種情況 類元件函式元件 文字 數字 class extends component 然後再來處理函式元件,函式元件的寫法是,直接就返回了dom 對於文字 數字,直接新增到...
React 中的虛擬DOM
react 的重新渲染,效能是很高的。因為它引入了虛擬dom的概念。呃,來看一下,render 函式渲染頁面的幾種做法。前兩步都是拿到state 資料 與 jsx模版。第一種就是比較樸素的方式。第二種方式雖然不用完全替換,但是也需要比對兩個dom。第三種是虛擬dom方式。虛擬dom 本質上就是 js...
React 重溫之 虛擬DOM
虛擬dom可以說是現代前端庫的標配了,好像你乙個前端框架不實現乙個虛擬dom出門都不好意思跟人打招呼,那麼到底什麼是虛擬dom呢?那麼與之相對應的,我們可以簡單理解成虛擬dom就是用其他語言模擬出乙個dom的樹形結構 那麼問題來了,為什麼要用其它語言模擬dom,人家本來就已經是乙個很完整的樹形結構物...