React虛擬DOM及其作用

2021-10-06 18:35:15 字數 651 閱讀 9655

虛擬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,人家本來就已經是乙個很完整的樹形結構物...