工业设计代做网站,oppo软件商店官网,wordpress 作品集 相册,wordpress 发送邮件React 和 Vue 的区别
博主面了几家公司#xff0c;看简历上写着使用Vue.js框架#xff0c;就会问#xff0c;你能说一说 vue 和 react的区别吗 #xff1f;react 听过#xff0c;没用过#xff0c;所以就只能尴尬的说不怎么了解react。这不#xff0c;最近刚学了react …React 和 Vue 的区别
博主面了几家公司看简历上写着使用Vue.js框架就会问你能说一说 vue 和 react的区别吗 react 听过没用过所以就只能尴尬的说不怎么了解react。这不最近刚学了react (不断爬坑中)同时看了些博客文章当一回搬运工如有错误请指出
简单的自我介绍一下
React是由Facebook创建的JavaScript UI框架它的诞生改变了JavaScript世界最大的一个改变就是React推广了Virtual DOM 并且创造了新的语法 - JSXJSX 允许在JavaScript中写html代码。
Vue是由尤大大开发的一个MVVM框架它采用的是模板系统而不是JSX。
安利一波
Virtual DOM
一听可能有点懵逼 我也很懵逼。所以我们来看看别人怎么说的 Vue.js(2.0版本)与React的其中最大一个相似之处就是他们都使用了一种叫Virtual DOM的东西。所谓的Virtual DOM基本上说就是它名字的意思虚拟DOMDOM树的虚拟表现。 Virtual DOM 是一个映射真实DOM的JavaScript对象如果我们要改变任何元素的状态那么是先在Virtual DOM 上先进行改变而不是直接地去修改真实的DOM。比如在Vue中我们将原来的节点改成这样 :// 原DOMdiv classboxp classlabelspan{{ label }}/span/p/div// 修改的DOMdiv classboxp classlabelspan{{ label }}/spanspan{{ username }}/span/p/div我们往p节点中新增了一个span节点于是我们一个新的Virtual DOM对象会被创建。然后新的Virtual DOM 和旧的Virtual DOM比较通过diff算法算出差异然后这些差异就会被应用在真实的DOM上
Vue 很“ 嚣张 ”它宣称可以更快地计算出Virtual DOM的差异这是由于它在渲染过程中由于vue会跟踪每一个组件的依赖收集通过setter / getter 以及一些函数的劫持能够精确地知道变化并在编译过程标记了static静态节点在接下来新的Virtual DOM 并且和原来旧的 Virtual DOM进行比较时候跳过static静态节点。所以不需要重新渲染整个组件树。
React默认是通过比较引用的方式进行当某个组件的状态发生变化时它会以该组件为根重新渲染整个组件子树。如果想避免不必要的子组件重新渲染你需要在所有可能的地方使用PureComponent或者手动实现shouldComponentUpdate方法。但是Vue中你可以认定它是默认的优化。 构建工具
React 采用 Create-React-App Vue 采用的是Vue-Cli这两个工具非常的好用啊大兄弟都能为你创建一个好环境不过Create-Reacr-App会逼迫你使用webpack和Babel而Vue-cli可以按需创建不同的模板使用起来更加灵活一点
数据流
这里借用一波言川老铁的图下边会贴出链接
很直观的我们可以看到在Vue2.x中只能parent - Child - DOM的形式而React只能单向传递React一直提倡的是单向数据流数据主要从父节点传递到子节点通过props。如果顶层父级的某个props改变了React会重渲染所有的子节点。我们只能通过setState来改变状态。
模板渲染方式不同
前面说了Vue和React的模板有所区别React是通过JSX来渲染模板而Vue是通过扩展的HTML来进行模板的渲染。React通过原生JS实现模板中的常见语法比如说条件啊、循环啊、三元运算符啊等都是通过JS语法实现。而Vue是在和组件代码分离的单独模板中通过指令v-if、v-for等实现。
这里react比较好点比如我们要引用一个组件react直接import 引入然后可以直接在render中调用了但是vue需要import之后还要在components里去声明才能用好气哦 Vuex 和 Redux
在Vue中我们是通过Vuex进行状态管理而在React中我们是通过Redux进行状态管理。但是这两者在使用上还是有区别的。
在vuex中我们可以通过在main.js中引入 store文件夹并把store挂载到new Vue实例中这样我们可以直接通过$store灵活使用。
你可以通过dispatch和commit进行更新数据通过this.$store.state.xx读取数据或者你可以通过mapState / mapActions 进行vuex的操作
而在React中我们需要每一个组件都引入connect目的就是把props和dispatch连接起来。
另外我们vuex可以直接dispatch action也可以commit update但是redux只能通过dispatch然后在reducer里接收到action通过判断action的type从而进行对应的操作redux不能直接调用reducer进行修改 Redux使用的是不可变的数据而Vuex的数据是可变的Redux每次修改更新数据其实就是用新的数据替换旧的数据而Vuex是直接修改原数据Redux 在检测数据变化的时候是通过 diff 的方式比较差异的而Vuex其实和Vue的原理一样是通过 getter/setter来比较的因为在vue实例的时候进行了依赖收集。不差上下
反正我觉得他们两个都好skrskr如果你想做一个小型项目就用vue想做大型项目就用react我是不知道怎样算小型怎样算大型我随心所欲想用哪个就用哪个我不会告诉你我都是做的个人小项目 相关链接
言川 - 关于Vue和React区别的一些笔记: https://github.com/lihongxun945/myblog/issues/21
Vue 官网 - 对比其他框架: https://cn.vuejs.org/v2/guide/comparison.html
众成翻译 - Vue vs React: Javascript 框架之战 : https://www.zcfy.cc/article/vue-vs-react-battle-of-the-javascript-frameworks-3310.html?utm_mediumhao.caibaojian.comutm_sourcehao.caibaojian.com
个人博客: http://blog.pengdaokuan.cn:4001
