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. python_WSGI接口

    WSGI:Web Server Gateway Interface WSGI接口定义非常简单,它只要求Web开发者实现一个函数,就可以响应HTTP请求.我们来看一个最简单的Web版本的“Hello, ...

  2. [openjudge-动态规划]鸣人的影分身

    题目描述 描述 在火影忍者的世界里,令敌人捉摸不透是非常关键的.我们的主角漩涡鸣人所拥有的一个招数--多重影分身之术--就是一个很好的例子. 影分身是由鸣人身体的查克拉能量制造的,使用的查克拉越多,制 ...

  3. CSS 层级选择器

    CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...

  4. Linux 基础内容

    1.linux版本有:redhat(收费),centos,ubuntu,suse(开发使用) 2./目录下的:etc配置文件目录,media挂载点,opt第三方安装目录,boot启动文件,home家, ...

  5. Linux 查看网卡流量、网络端口

    查看网络流量 # 查看网卡流量 命令:sar -n DEV 1 10 注:每1秒 显示 1次 显示 10次 平均时间: IFACE rxpck/s txpck/s rxkB/s txkB/s rxcm ...

  6. Linux Time_wait网络状态 调优

    Time_wait状态 表示收到了对方的FIN报文,并发送出了ACK报文,就等2MSL后即可回到CLOSED可用状态了. 如果FIN_WAIT_1状态下,收到了对方同时带FIN标志和ACK标志的报文时 ...

  7. PHP快速排序(递归)

    日常的排序算法中,快速排序是其中一种.实现起来相对简单. 假设有一个数组,有若干(N)个元素(数字且无序),需要对其进行从小到大的排序. 快速排序的思路是怎么样的呢? 取一个中间值,然后,用其他数组元 ...

  8. linux --- 5. nginx 初始

    一. 安装nginx 1.安装nginxz之前的依赖包 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel o ...

  9. pandas之时间序列

    Pandas中提供了许多用来处理时间格式文本的方法,包括按不同方法生成一个时间序列,修改时间的格式,重采样等等. 按不同的方法生成时间序列 In [7]: import pandas as pd # ...

  10. C# 控件置于最顶层、最底层

    btn.BringToFront();//将控件放置所有控件最前端 btn.SendToBack();//将控件放置所有控件最底端