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. 关于table的td和ul元素li隔行变色的功能实现

    table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

  2. html5 javascript 事件练习1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. 2015 北京网络赛 E Border Length hihoCoder 1231 树状数组 (2015-11-05 09:30)

    #1231 : Border Length 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Garlic-Counting Chicken is a special spe ...

  4. RxJava 详解——简洁的异步操作(一)

    随着越来越多的人开始提及 RxJava ,鉴于 RxJava 目前这种既火爆又神秘的现状,写下这篇文章来对 RxJava 做一个相对详细的.针对 Android 开发者的介绍. 这篇文章的目的有两个: ...

  5. androidstudio项目如何使用git版本回退

    使用android studio 编写代码错误,有时可能会需要将项目版本回退到以前的某个版本上,这对于很多刚使用git的网友来说操作可能不是很懂,下面为大家整理了android studio 回退已经 ...

  6. 线程同步——lock锁

    线程同步即解决线程安全问题的第三种方式——使用lock锁 代码实现: 其中,ReentrantLock是lock接口的实现类,这边是使用多态创建,访问成员方法时,编译看左,运行看右: Reentran ...

  7. SQL语句汇总(二)——数据修改、数据查询

    SQL语句第二篇,不说废话直接开始吧. 首先创建一张表如下,创建表的方法在上篇介绍过了,这里就不再赘述. 添加新数据: INSERT INTO <表名> (<列名列表>) VA ...

  8. python爬虫——论抓包的正确姿势和学好Javascript的重要性(1)

    没事想爬下数据,就入了scrapy坑,跟着https://zhuanlan.zhihu.com/data-factory这篇教程走,中间被小数量的网站坑过,不过还是写出了爬虫~~ 切糕王子:毫无防御, ...

  9. 【 记忆网络 2 】 End-to-End Memory Network

    继上一篇:Memory Network 1. 摘要 引入了一个神经网络,在一个可能很大的外部记忆上建立了一个recurrent attention模型. 该体系结构是记忆网络的一种形式,但与该工作中的 ...

  10. linux的必知必会规则