Vue于React特性对比(二)

一,关于响应式数据更新方式的实现

1)只有在data里面定义的数据才会有响应式更新

vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新。可以称之为依赖式的响应。因为依赖所以注定了只会更新与data相关的数据。

2)react则是更新在state里面定义的数据

this.setState()方法背后除了事件队列的收集之后的统一修改,生成新的react树,通过diff算法计算出哪里需要修改。

为了避免多余的数据更新,可以使用react生命周期函数当中的shouldComponentUpdate这个方法对输入的props和state做对比,终止多余的数据更新操作。

3)关于vuex

vuex只能用在vue上面。

vuex和redux分别是vue和react的状态管理工具。

vuex和redux都是共享状态,前者在状态更新上,利用了vue自身自带的依赖数据更新方式,通过将vuex的store诸如到根实例的方式,注入到各个组件当中。

4)redux

redux实现了redux的完全解耦,可以用在react上面,也可以用在ng上面。

redux同样借助Provider这个根组件,将store注入到上下文context中,但其实现响应式数据更新的方式,是通过发布订阅模式结合共享数据的方式:也就是通过复制路径数据,新路径数据与原有状态作对比的方式,实现变化的数据更新。这样就实现了数据更新的优化。

问题是上面方法只是进行浅层数据的比较,这就导致如果props是一个引用数据,依然会存在浪费,这个时候就需要保证每次传入的是同一个对象。

而其他组件部分,没有通过connect连接的则仍然需要shouldComponentupdate优化。

相比较而言,vuex明显更为直接。

二,vue-router和react-router

vue路由的思维方式更符合中国人的思维,一个占位符router-view,显示不同内容。且也是注入的方式注入到根实例中。且路由组件明显分离。

react路由在写法上面包含根组件(不算redux的Provider),没有vue的占位符概念,而是多个route共同构成的占位符。

vue的嵌套路由比react更为直观,react的嵌套路由只能分散开。

react没有全局路由守卫的概念。

三,其它

react知识v层,vue是vm层。

 真正来说redux更加解耦,vue的全家桶反而仅仅只能给vue用。

vue的核心要比react的更加智能,但vue全家桶则不如react全家桶解耦。

但正因为redux相关库的强解耦,导致使用redux需要更多的组件进行性能优化,比如需要react-redux,需要redux-ignore等。这点来说反倒不如vue便于开发和维护。

vue依据的是.vue文件构建的组件化系统,react依据的是React.Component这个类。

二者都在构建一个这样的系统:通过增加代码就能增加系统的功能,而不是通过对现有代码的修改来增加功能。

不断更新……

2018.11.4

react相对vue更灵活这点是从jsx语法本身来说。vue有着更多的api,而react因为本质依然是js,所以api并不多。

react整体上面是模板方法模式。

转载于:https://www.cnblogs.com/zhensg123/p/9460390.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366183.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《黑客攻防技术宝典Web实战篇@第2版》读书笔记1:了解Web应用程序

读书笔记第一部分对应原书的第一章,主要介绍了Web应用程序的发展,功能,安全状况。 Web应用程序的发展历程 早期的万维网仅由Web站点构成,只是包含静态文档的信息库,随后人们发明了Web浏览器用来检索和显示那些文档&am…

电脑入门完全自学手册_3DMAX零基础入门到精通的学习路线和教程

没有美术基础可以学建模吗?毋庸置疑,只要肯学都是可以的!那么我们今天来说说零基础学习建模要着重注意什么。最高效最快速的入门学习方式:看知识兔视频课程,跟着知识兔老师操作,听知识兔老师讲解&#xff0…

使用Java RMI时要记住的两件事

这是一篇简短的博客文章,介绍使用Java RMI时应注意的两个常见陷阱。 设置java.rmi.server.hostname 如果您感到陌生,Connection拒绝托管: RMI客户端上的错误消息,并且您确定连接应该正常工作(您仔细检查了所有标准配置…

Python-UiAutomator2实现Android自动化测试

本帖转自搜狗测试公众号 【一、前言】 基于Python-UiAutomator2实现Android自动化测试,小编在Android应用的自动化性能测试中进行了实践。本篇将简单介绍python中使用adb、aapt命令的方法以及Python-UiAutomator2使用,后续文章将对环境搭建以及自动化性能…

阅读笔记:ImageNet Classification with Deep Convolutional Neural Networks

概要: 本文中的Alexnet神经网络在LSVRC-2010图像分类比赛中得到了第一名和第五名,将120万高分辨率的图像分到1000不同的类别中,分类结果比以往的神经网络的分类都要好。为了训练更快,使用了非饱和神经元并对卷积操作进行双GPU实现…

vsCode 设置vue 保存自动格式化代码

setting {// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存的时候自动格式化"editor.formatOnSave": true,// #每次保存的时候将代码按eslint格式进…

您是否敢更改HashMap实现?

如今,有大胆的工程师在为Oracle工作。 昨天尝试确定Heisenbug时,我得出了这个结论。 不足为奇,当我尝试找到解决方案时,该错误似乎消失了。 几个小时后,将问题归结为JDK7更新之间的细微差别,该错误的“ Hei…

php 函数变量的顺序,PHP实现参数的自定义顺序调用 | 剑花烟雨江南

首先我们以添加用户为例来看两个方法://方法①public function addUser(string $userName, string $userPassword, string $telephone, string $userEmail ){}//方法②public function addUser(array $data){}方法①的优点: 通过方法的定义,…

硬件信息修改大师_零成本学习之单片机硬件开发(1)

从今天开始给大家逐步讲解单片机编程,有兴趣的小伙伴们,可以关注本课程,完全免费本人从事从2004年大学毕业开始从事开发工作,先后做过单片机开发、ucOSII开发、手机开发、android APP开发、PHP开发、微信小程序开发,目…

RotateDrawable

用来对Drawable进行旋转,也是通过setLevel来控制旋转的,最大值也是:10000 相关属性如下: fromDegrees:起始的角度,,对应最低的level值,默认为0toDegrees:结束角度,对应最高的level值,默认360pivotX:设置参照点的x坐标,取值为0~1,默认是50%,即0.5pivotY:设置参照点的…

ionic3 自动创建启动背景splash以及图标icon

在新建的项目文件夹下的 resources下就是我们放置图标以及启动背景图片的位置了。 如果现在我们想生成自己的图片的启动背景以及图片,我们需要把resources下的 icon.png 以及splash.png 替换为我们的图片。 icon 图片最好为1024x1024像素 splash 图片最好为2732x2…

Spring容器的简单实现(IOC原理)

引言:容器是什么?什么是容器?Spring容器又是啥东西?我给Spring容器一个对象名字,为啥能给我创建一个对象呢? 一、容器是装东西的,就像你家的水缸,你吃饭的碗等等。 java中能作为容器…

Java:安排作业按时间间隔运行

最近,我花了一些时间围绕Neo4j版本之间的滚动升级构建了一组测试,作为其中的一部分,我想记录升级发生时的群集状态。 测试的主线程会等待升级完成,因此我想每隔几秒钟登录另一个线程。 Alistair向我指出了ScheduledExecutorServi…

epic怎么添加本地游戏_游戏日报:原神公测无法上架多家安卓渠道;Epic投资布局游戏UGC平台...

// 热点标签/// NOCITCE华为|小米|OPPO|米哈游|腾讯|莉莉丝B站|阅文集团|Epic|万国觉醒|灰烬战线FGO|怪物弹珠|勇者斗恶龙|金币大师阴阳师|和平精英|王者荣耀|三国志战略版1.华为、小米、OPPO等多家安卓渠道的《原神》版主发布公告称,因开发者要求/未与米哈游达成一…

php 出错处理,PHP 错误处理机制

在日常的项目开发过程中,总是会出现一些我们意想不到的异常错误,如果我们对此没有进行相对完善的处理,那么程序看上去也很不专业,也很可能就会成为别人攻击系统的有效信息;有些错误异常会终止脚本执行,这个…

根据location地址,在导航栏高亮显示当前页面

获取当前页面的地址栏。与导航栏中所有<a> 标签的href属性 进行比较。如果相等则高亮显示 此<a>标签。 注意点&#xff1a;a 标签的href 属性在浏览器解析时 是绝对路径。 a 标签的href 如果是锚点&#xff0c;则 pathname &#xff0c; href都与 location的 pathn…

解决关于 ionic3 启动白屏 控制台错误提示:Uncaught SyntaxError Use of const in strict mode.

今天将项目从ionic2 升级为ionic3 &#xff0c;ionic serve 运行在网页上无任何错误。 但是将项目打包成为android apk 却一直卡在启动页面 白屏&#xff0c;进不去的情况。后来在android studio 控制台看到这个错误提示&#xff1a;Uncaught SyntaxError Use of const in str…

参数与超参数

作为机器学习攻城狮&#xff08;咳咳&#xff1a;调参员&#xff09;&#xff0c;参数和超参数是最最基础的常识。 1、参数&#xff08;模型根据数据可以自动学习出的变量&#xff09; 参数指的是模型内部的配置变量(configuration variable)&#xff0c;可通过数据来估计其取值…

使用structure101分析软件包的依赖关系

稳定应用程序的一个关键是结构良好的代码库。 我们知道我们应该建立尽可能多的黑匣子&#xff0c;因为一旦完成一个黑匣子&#xff0c;我们就不必再考虑它的内部了。 您只需要使用您或其他团队成员通过明确定义的界面编写的代码即可。 这使您可以专注于要添加的下一个功能。 当…

excel高级筛选怎么用_神!Excel高级筛选原来如此好用

转自EXCE不加班这两天的宏教程都提到了高级筛选这个功能&#xff0c;不过只是用到最基本的用法。高级筛选其实是一个很好用的功能&#xff0c;今天卢子来全面讲解。1.按关键词筛选高级筛选最重要的就是条件区域&#xff0c;资产名称四门书柜&#xff0c;日期2017/1/1&#xff0…