1、當元件的state或props發生改變，元件的render函式會重新執行一次
根據 state，得到資料
根據 jsx，得到模板
資料 + 模板 結合，通過react.createelement()生成虛擬dom（js物件，用來描述真實的dom）——會消耗效能，但代價低
[
'div',,
['span',,
'one'
]]
"one"
>
>
onespan
>
div>
資料 + 模板 結合，生成新的虛擬dom——極大地提公升了效能
[
'div',,
['span',,
'two'
]]
直接操作dom，改變差異的地方
2、diff演算法
同層比較：對於兩個dom tree只比較同一層次的節點，如果這一層有不同，則直接把此層所有的子節點刪除，用新虛擬dom的子節點代替
對於同一層級的element節點，diff提供了以下3種節點操作：
insert_markup 插入節點：對全新節點執行節點插入操作
move_exising 移動節點：元件新集合中有元件舊集合中的型別，且element可更新，即元件呼叫了receivecomponent，這時可以復用之前的dom，執行dom移動操作
remove_node 移除節點：此時有兩種情況：元件新集合中有元件舊集合中的型別，但對應的element不可更新、舊組建不在新集合裡面，這兩種情況需要執行節點刪除操作
key值不要用index作為值，可以用item作為值（item在刪除和新增中都不改變）
react（1） 虛擬DOM概念理解
虛擬dom virtual document object model 通過js操作頁面上的元素 input，tr 是框架中的概念，程式設計師用js物件來模擬頁面上的dom樹 實現dom元素的高效更新 如果要將乙個 按照某一列排序，我們是通過對 的物件陣列實現重新排序後，再將整個陣列重新渲染到頁面上...
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.資料 模板 生成新...