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

时间: 2024-11-06 10:01:02

React 其实比 MVVM 架构更加卡顿的相关文章

[转]MVVM架构~mvc,mvp,mvvm大话开篇

MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller. 在MVC里,View是可以直接访问

WPF MVVM 架构 Step By Step(6)(把actions从view model解耦)

到现在为止,我们创建了一个简单的MVVM的例子,包含了实现了的属性和命令.我们现在有这样一个包含了例如textbox类似的输入元素的视图,textbox用绑定来和view model联系,像点击button这样的行为用命令来联系.view model和model在内部通信. 但是在上面的架构中有一个问题,command类和view model有很严重的耦合.如果你记得command类的代码(在下面也有展示),在构造函数中传递view model对象,意味着这个command 类不能再其他的vie

Webpack + React全栈工程架构项目实战精讲

详情请交流  QQ  709639943 01.Webpack + React全栈工程架构项目实战精讲 02.跨平台混编框架 MUI 仿豆瓣电影 APP 03.Node.js入门到企业Web开发中的应用 04.Python3 全网最热的Python3入门+进阶 比自学更快上手实际开发 05.Java秒杀系统方案优化 高性能高并发实战 06.Java深入微服务原理改造房产销售平台 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面试一步搞定 09.Java Spring

《Android构建MVVM》系列(一) 之 MVVM架构快速入门

前言 本文属于<Android构建MVVM>系列开篇,共六个篇章,详见目录树. 该系列文章旨在为Android的开发者入门MVVM架构,掌握其基本开发模式. 辅以讲解Android Architecture Components,使得更好的实现MVVM架构. 目录树 <Android构建MVVM>系列(一) 之 MVVM架构快速入门 前言 分层思想 什么是MVC/MVP? MVVM是什么,与MVC/MVP有何区别? Android Architecture Components(架

MVVM 架构与数据绑定库

Model-View-Presenter(MVP),即模型-视图-表示层,架构被广泛应用于 Android 应用程序,通过引入表示层将视图与表示逻辑和模型分离.Model-View-ViewModel(MVVM),即模型-视图-视图模型,与 MVP 非常相似,视图模型充当增强的表示层,使用数据绑定器保持视图模型和视图同步.通过将视图绑定到视图模型属性上,数据绑定程序可以处理视图更新而无需手动更改数据来设置视图(例如,不用再设置控件 TextView 的setTest() 或者 setVisibi

IOS面向协议的MVVM架构介绍(来着网络的链接)

https://academy.realm.io/cn/posts/doios-natasha-murashev-protocol-oriented-mvvm/   面向协议的 MVVM 架构介绍 http://www.cocoachina.com/ios/20160108/14911.html    猿题库 iOS 客户端架构设计

MVVM架构~使用boxy和knockoutjs实现编辑功能

这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图 说在前 在实现这个功能中,我们对knockout的基础知识一定要牢牢掌握,要知道,在knockout里一切都是对象,并且要知识knockout可以根据DIV进行绑定,对于验证这块,可以根据你的object进行验证,而并非只能验证全局对象,而对于boxy来说, 要知道它加载HTML代码的方式(如果HTML代码上有knockout绑定,则需要先将html代码加载上,然后再绑定model,这就用到了box

MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等

返回目录 在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章不同,需要有两个参数,其一是远程方法的签名(JS方法),其二是已知要比较的数据(可能是加密后的密码数据),当用户输入文字后,它将会调用JS方法获取远程数据,以比较原数据与你输入的数据是否匹配. 知识点:以对象作为参数进行传递 ko.validation.js的扩展 //ajax相等验证 kv.rul

ReactiveCocoa常见操作方法介绍/MVVM架构思想

1.ReactiveCocoa常见操作方法介绍. 1.1 ReactiveCocoa操作须知 所有的信号(RACSignal)都可以进行操作处理,因为所有操作方法都定义在RACStream.h中,因此只要继承RACStream就有了操作处理方法. 1.2 ReactiveCocoa操作思想 运用的是Hook(钩子)思想,Hook是一种用于改变API(应用程序编程接口:方法)执行结果的技术. Hook用处:截获API调用的技术. Hook原理:在每次调用一个API返回结果之前,先执行你自己的方法,