react 的重新渲染，效能是很高的。因為它引入了虛擬dom的概念。
呃，來看一下，render 函式渲染頁面的幾種做法。
前兩步都是拿到state 資料 與 jsx模版。第一種就是比較樸素的方式。第二種方式雖然不用完全替換，但是也需要比對兩個dom。第三種是虛擬dom方式。
虛擬dom 本質上就是 js物件，因此在比對的時候操作js 物件比操作dom 在效能上有很大的提公升。
實際上，react 底層渲染的步驟是下面這樣（上圖中3，4顛倒一下順序）
實際上jsx 與真實dom 之間的關係是：
jsx return 的模版，先轉化為 虛擬dom（js物件），再會轉化為真實的dom。
下圖兩個return 的作用是一樣的，react 底層正是使用createelement() 生成虛擬dom，虛擬dom再被生成真實dom。
使用虛擬dom的優點：
1. 效能提公升了 （操作js物件比操作dom要更效率高）
2. 它使得跨端應用得以實現。react native
虛擬dom 的 diff 演算法
上圖，我們介紹react 渲染步驟時，第七步是比較原始虛擬dom與新的虛擬dom的區別
比對，react 底層使用了diff演算法。
什麼時候會去做比對？當資料發生改變的時候。
資料改變，要麼是state 資料要麼是props資料，而子元件不可改變props資料，因此props 改變的時候也是state 改變的時候。
state 改變的話，使用的就是setstate()函式。setstate() 是乙個非同步函式（為了提公升react底層效能）。
如果說，連續呼叫三次setstate，react 底層會把三次setstate呼叫合併為一次setstate呼叫。只做一次虛擬dom的比對，然後更新一次dom。
diff 演算法，同級比對
【注意】 在迴圈的時候，引入key 值，可以提公升虛擬dom的效能，因此key 的值盡量用穩定的值，不要使用會變的index。
react中的虛擬DOM
資料驅動原理 用虛擬dom 1.state資料 2.jsx模板 3.資料 模板相結合，生成虛擬dom 虛擬dom就是乙個js物件，用它來描述真實的dom div span hello 損耗了極小的效能 4.用虛擬dom的結構生成真實的domhello 5.state 發生變化 6.資料 模板 生成新...
react虛擬DOM 中的 diff 演算法
定義 state,有了資料 有乙個模板 資料 模板生成虛擬 dom 虛擬 dom 就是乙個 js物件,用它來描述真實 dom 用虛擬 dom 的結構生成真實的 dom,來顯示 state 發生變化 資料 模板 生成新的虛擬 dom 極大地提公升效能 比較原始虛擬 dom和原始虛擬 dom的區別,找到...
React中的虛擬DOM和diff演算法
react原理 我們來想一下如何實現react 第一種方案 1.state 資料 2.jsx 模板 3.資料 模板 結合,生成真實的dom 來顯示 4.state 發生改變 5.資料 模板 結合,生成真實的dom 替換原始的dom 但這種方案在第五步有著很大的效能缺陷 用新生成的dom去替換原始的d...