React 其實比 MVVM 架構更加卡頓

標籤：需要   pat   外掛程式   esc   前端   view   type   diff   完整   

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 提供的機制非常薄弱，你不得不用非常奇怪和蹩腳的方式，去達到想要的組件化效果。  2016.11 月更新：React 架構我們在一個項目中應用後就放棄了，最終我們選擇了 Angular 2 架構，是一個完整度很高的架構，應用 TypeScript 以及很多先進的軟體開發思想，在“大前端”化、“前端後端化”的趨勢中，Angular 2 走在了前面。 

React 其實比 MVVM 架構更加卡頓