1.数据是不是可变的

react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。
react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比。

而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom

 

2.通过js来操作一切,还是用各自的处理方式

react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css,社区的styled-component、jss等,

vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理。

3.类式的组件写法,还是声明式的写法

react是类式的写法,api很少,

而vue是声明式的写法,通过传入各种options,api和参数都很多。所以react结合typescript更容易一起写,vue稍微复杂。

4.什么功能内置,什么交给社区去做

react做的事情很少,很多都交给社区去做,

vue很多东西都是内置的,写起来确实方便一些,

比如 redux的combineReducer就对应vuex的modules,
比如reselect就对应vuex的getter和vue组件的computed,
vuex的mutation是直接改变的原始数据,而redux的reducer是返回一个全新的state,所以redux结合immutable来优化性能,vue不需要。

作者:凌霄光
链接:https://www.jianshu.com/p/b7cd52868e95
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

vue 和react的区别的更多相关文章

  1. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  2. Vue和React的区别,以及如何选择?

    简介 React:React是一个用于创建可重用且有吸引力的UI组件的库.它非常适合代表经常变化的数据的组件. Vue:Vue.js是一个开源JavaScript框架,能够开发单页面应用程序.它还可以 ...

  3. bootstrap与vue,react的区别

    链接(与Vue区别):https://www.php.cn/faq/423095.html 链接(BootStrap, React, Vue的比较):https://www.jianshu.com/p ...

  4. vue和react动画区别

    触发动画 vue触发动画是 v-show,v-if ,动态组件或者组件的根节点 react 是CSSTransition上的属性 in 是true 或false触发动画

  5. 1.vue和react的区别

    1.个人感觉Vue好用,react不咋地呀. 2.(网上搜的)Vue的解决方案适用于小型应用,但对于对于大型应用而言不太适合.

  6. vue和react的区别

    数据: vue:双向数据绑定和单向数据流.双向数据绑定:DOM元素绑定的data值,当发生改变后,vue的响应式机制会自动监听data的变化重新渲染.单向数据流:当父组件给子组件传递数据的时候,子组件 ...

  7. Vue与React的区别

    对已经了解的内容,做几点介绍,并不全面,后期会不断更新~ React与Vue都是组件化的开发框架,整体功能类似. 一.数据处理模式(单项 or 双向): React推崇单项数据流的处理模式,数据不可以 ...

  8. 前端两大框架 vue 和 react 的区别

    1. 设计思想 vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计: react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流: 2. 编写语法 vue: 采用单文 ...

  9. Vue与React的异同

    众所周知,前端现在最火的两个框架是Vue和React了.通过一段时间的学习与项目上的实践,我想通过比较他们之间的异同点来发现以后在项目的技术选型中知道怎么抉择用哪个.有一点说明的是他们各自有自己的优势 ...

随机推荐

  1. Go 初体验 - 令人惊叹的语法 - defer.2 - 如何提前执行?

    上一文中讲到 defer 会在宿主函数 return 之前调用,那么我们就是想在宿主函数执行到中间调用,怎么办呢? 1. 改变宿主函数逻辑,分成多个函数,需要的那个函数里 defer . 2. 使用匿 ...

  2. 关于easy ui 的combobox遍历选中

    $.post("fleetAction!queryAllCompanyByCompanyID.do",{"truckCompany.id":companyId} ...

  3. dygod.net

    # -*- coding: utf-8 -*- import scrapy from scrapy.linkextractors import LinkExtractor from scrapy.sp ...

  4. Hadoop 配置文件 & 启动方式

    配置文件: 默认的配置文件:相对应的jar 中 core-default.xml hdfs-default.xml yarn-default.xml mapred-default.xml 自定义配置文 ...

  5. Linux系统命令 3

    1.vmstat命令监控系统资源[root@localhost ~]#vmstat [刷新延时 刷新次数] 例如:[root@localhost proc]#vmstat 1 3 2.dmesg开机时 ...

  6. 后端解决 微信H5支付 商户参数格式错误 方法

    问题如图: 后端解决方法: 在返回mweb_url 后不要直接访问这个链接,在当前页面用js window.location.href = mweb_url 这样跳转就可以了

  7. Java 创建文本内容

    Java 创建文本内容 import java.io.FileWriter; import java.io.IOException; public class TestFile { public st ...

  8. 从路由器镜像中提取uImage头信息

    uImage header为64字节,文件头为27 05 19 56 hexdump -C a.bin | grep "27 05 19 56" 或者 hd aa.bin | gr ...

  9. hbot固件配置

    又入了一台打印机,171到手,本来之前有更好的,无奈别人下手太快,只剩这台了. 175x135x180的样子. 创客的板,还带16g的闪迪内存卡,看到那会儿感觉赚大了! 拿到的时候不少螺丝松的,有的打 ...

  10. 自制操作系统Antz(2)——进入保护模式 (上) jmp到保护模式

    Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.htm Linux内核源码分析地址:https://www.cnblogs.c ...