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 走在了前面。