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 提供的机制非常薄弱，你不得不用非常奇怪和蹩脚的方式，去达到想要的组件化效果。

 

 

2016.11 月更新：

React 架构我们在一个项目中应用后就放弃了，最终我们选择了 Angular 2 架构，是一个完整度很高的框架，应用 TypeScript 以及很多先进的软件开发思想，在“大前端”化、“前端后端化”的趋势中，Angular 2 走在了前面。