码迷,mamicode.com
首页 > 其他好文 > 详细

React 其实比 MVVM 架构更加卡顿

时间:2016-11-14 12:33:02      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:需要   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 架构更加卡顿

标签:需要   pat   插件   esc   前端   view   type   diff   完整   

原文地址:http://www.cnblogs.com/darklx/p/6061081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!