[JavaScript知识库]vue和react的区别

文章目录

目录

一、什么是vue，什么是react？

二、共同点

三、不同点

总结

一、什么是vue，什么是react？

vue

? ? ? ?Vue是一个用于为Web构建的UI的渐进式框架。它最初于2014年由前Google开发人员Evan You发布，他使用AngularJS并决定排除Angular框架的痛点并构建轻量级的东西。?

? ? ? ? Vue是渐进式JavaScript框架。“渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念。Vue可以在任意其他类型的项目中使用，使用成本较低，更灵活，主张较弱，在Vue的项目中也可以轻松融汇其他的技术来开发。特点：易用（使用成本低），灵活（生态系统完善）

react

React是由Facebook开发的用于构建用户界面的JavaScript库，Facebook对市场上JavaScript MVC框架都不太满意，Facebook就自己写了一套用于架设Instagram，React由此诞生。

? ? ? ? React主张是函数式编程的理念， 实现了前端界面的高性能高效率开发，react很擅长处理组件化的页面。React的官方网站提到了“学习一次，随处写作”这个关键功能，可以使用React框架在JavaScript中构建移动应用程序。在 React 中，所有的组件的渲染功能都依靠 JSX，它是JavaScript的语法扩展，它在创建UI组件和调试时非常简单有用。

二、共同点

1. 数据驱动视图
2. 组件化
3. 都使用了?Virtual?DOM?+?Diff算法?

三、不同点

1. 核心思想不同：Vue早期开发就尤雨溪大佬，所以定位就是尽可能的降低前端开发的门槛，让更多的人能够更快地上手开发。这就有了vue的主要特点：灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确。

   React 从一开始的定位就是提出 UI 开发的新思路。背靠大公司Facebook 的React，从开始起就不缺关注和用户，而且React想要做的是用更好的方式去颠覆前端开发方式。所以React推崇函数式编程（纯组件），数据不可变以及单向数据流,当然需要双向的地方也可以手动实现， 比如借助onChange和setState来实现。

2. 响应式原理不同：Vue依赖收集，自动优化，数据可变。Vue递归监听data的所有属性,直接修改。当数据改变时，自动找到引用组件重新渲染。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? react??React基于状态机，手动优化，数据不可变，需要setState驱动新的state替换老的state。当数据改变时，以组件为根目录，默认全部重新渲染, 所以 React 中会需要?shouldComponentUpdate?这个生命周期函数方法来进行控制

3. 组件写法差异：React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js; Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)

   这个差异一定程度上也是由于二者核心思想不同而导致的。

4. diff算法：vue对比节点。当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，而react认为是同类型节点，只是修改节点属性。

   vue的列表对比，采用的是两端到中间比对的方式，而react采用的是从左到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移到第一个。总体上，vue的方式比较高效。

5. 渲染过程：Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

   React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。

   如果应用中交互复杂，需要处理大量的UI变化，那么使用Virtual DOM是一个好主意。如果更新元素并不频繁，那么Virtual DOM并不一定适用，性能很可能还不如直接操控DOM。

6. vuex和redux：

   从表面上来说，store注入和使用方式有一些区别。在Vuex中，$store被直接注入到了组件实例中，因此可以比较灵活的使用：使用dispatch、commit提交更新，通过mapState或者直接通过this.$store来读取数据。在Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。另外，Vuex更加灵活一些，组件中既可以dispatch action，也可以commit updates，而Redux中只能进行dispatch，不能直接调用reducer进行修改。

   从实现原理上来说，最大的区别是两点：Redux使用的是不可变数据，而Vuex的数据是可变的，因此，Redux每次都是用新state替换旧state，而Vuex是直接修改。Redux在检测数据变化的时候，是通过diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过getter/setter来比较的，这两点的区别，也是因为React和Vue的设计理念不同。React更偏向于构建稳定大型的应用，非常的科班化。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用Vue的感觉。

7. 框架：Vue本质是MVVM框架，由MVC发展而来；

   React是前端组件化框架，由后端组件化发展而来。

四、语法区别

1. 路由：
2. 循环：vue循环dom是在html里面使用v-if指令来进行循环，react是使用{数组.map((循环出来的数据,下表)=>{})}来进行循环的
3. 解决跨域的区别：vue是写在vue.config.js里面，react可以写在package.json里也可以写在src文件夹下的setupProxy.js里

五、react和vue的选择

在以下情况选择vue

1. 最新文档和更简单的语法。
2. 更小，更快，更灵活。
3. 需要丰富的HTML模板，易于开发。

在以下的情况选择react

1. 需要构建移动应用程序。
2. 需要构建大型应用程序。
3. 轻量级，易于版本迁移。

总结

如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js，

如果是大规模应用程序和移动应用程序的应该选择React。