React 其實比 MVVM 架構更加卡頓

React 號稱經過引入 Virtual DOM 帶來了性能的提高，而其實 React 之因此須要 Virtual DOM，是由於它的架構下，state 的變動是全量的，而後觸發 render 返回全量的新的 Virtual DOM 樹形結構，經過對比新舊 Virtual DOM 結構，決定如何增量式更新 DOM。

 

因此 React 實際上是由於不用 Virtual DOM ＋ Diff ＋ Patch，會有嚴重的性能問題，因此才這麼作，而不是由於這麼作了性能好。

 

想想，不管是 MVVM 仍是傳統的 jQuery 選擇器開發模式，DOM 的變動自己是增量的，因此性能並不會比 React 差。

 

事實上，React 由於設計上 state （能夠理解爲 View Model）的變動必須是全量的，這就致使它必須先 diff 一遍 old state 和 new state，而後再 diff old Virtual DOM 和 new  Virtual DOM，由於多了這個步驟，因此其實比傳統模式更慢。

 

他們說，state 的 diff 和  Virtual DOM 的 diff 很是快，由於對象很是輕量，事實上，咱們如今碰到的 React Material UI Tab 插件，在手機上滑動切換卡頓問題，通過反覆測試對比驗證，就是由於每一幀的滑動，都會觸發 setState，繼而觸發 render 更新內聯在 div 上的 style 樣式以響應用戶請求作出滑動效果，很是的卡頓。

 

而 Material UI  插件正是嚴格遵社了 React 的指導，改寫此插件的性能問題時，我不得不違反 React 的規定，不要每次滑動都 setState，而是經過 dom 去直接更新 css，即便沒有用 css 3，手機上速度也變得正常了。

 

另外 React 所強調的單向數據流動，實際使用下來，也並不美好啊！

 

React 作的 view 層的組件化看起來不錯，但也只是看起來如此，實際要作好組件化，發現 React 提供的機制很是薄弱，你不得不用很是奇怪和蹩腳的方式，去達到想要的組件化效果。