115、Vue和React的区别

目录

 

1. Vue和React中diff算法区别

2. 数据流的不同

3. 组件通信的区别

4、渲染过程不同

5、Vuex和Redux的区别

6、框架本质不同

 7、模板渲染方式的不同

8、路由跳转的方式不同

9、构建工具不同

10、HoC和mixins

11、使用场景

12、总结

---

1. Vue和React中diff算法区别

vue和react的diff算法，都是忽略跨级比较，只做同级比较。vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。

1. vue比对节点，当节点元素类型相同，但是className不同，认为是不同类型元素，删除重建，而react会认为是同类型节点，只是修改节点属性；
2. vue的列表比对，采用从两端到中间的比对方式，而react则采用从左到右依次比对的方式。当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到第一个。总体上，vue的对比方式更高效。
    

2. 数据流的不同

1. Vue支持双向数据绑定。就是model的更新会触发view的更新，view的更新也会触发model的更新。
2. React不支持双向绑定。双向的地方也可以手动实现， 比如借助onChange、setState()来实现 (setState是redux中的)。 不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。
3. Vue和React都是单向数据流。组件之间的通信采用单向数据流，是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，要想在子组件模板中引用父组件数据，可以使用 props 将数据向下传递到子组件。假如支持双向数据流，子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以vue不推荐子组件修改父组件的数据，直接修改props会抛出警告。

3、渲染过程不同

• 在操作界面时，要尽量减少对DOM的操作，Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好。
• vue和react的不同：尽量减少除DOM操作以外的其他操作。

1. React中当某个组件发生变化时，会以该节点为根，重新渲染所有的子组件，如果要避免子组件的重新渲染，可以在生命周期函数shouldComponentUpdate中进行设置。
2. Vue能自动追踪数据依赖，只渲染需要更新的子组件。

4、Vuex和React-Redux的区别

从表面上来说，store注入和使用方式有一些区别。

1. 在Vuex中，$store被直接注入到了组件实例中，因此可以比较灵活的使用：使用dispatch、commit提交更新，通过mapState或者直接通过this.$store来读取数据。
2. 在Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。

从实现原理上来说，最大的区别是两点：

1. Redux使用的是不可变数据，而Vuex的数据是可变的，因此，Redux每次都是用新state替换旧state，而Vuex是直接修改。
2. React更偏向于构建稳定大型的应用。相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。因此也会给人一种大型项目用React，小型项目用Vue的感觉。

vuex的流程： 

 5、组件写法差异

1. React推荐的做法是JSX + 行内样式, 也就是把 HTML 和 CSS 全都写进 JavaScript 中。
2. Vue 推荐的做法是 template 的单文件组件格式。即 html,JS，css 分别写在同一文件的template、script、style中。
3. Vue可以支持JSX的写法，但是React不支持模板的写法；

JSX：

 它是一种JavaScript语法扩展，在React中可以方便地用来描述UI；

JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象；

const element = 
Hello, world!
;

6、核心思想不同

1. Vue定位就是尽可能的降低前端开发的门槛，让更多的人能够更快地上手开发；
2. vue的主要特点：灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确。
3. React 从一开始的定位就是提出 UI 开发的新思路。
4. React推崇函数式编程（纯组件），数据不可变以及单向数据流,当然需要双向的地方也可以手动实现， 比如借助onChange和setState来实现。

7、组件的导入

我们import的组件在render中可以直接调用。

但是在Vue中，import 一个组件完了之后，还需要在 components 中再声明下。才可使用

下面的区别可不看

8、框架本质不同

1. Vue本质是MVVM框架，由MVC发展而来；
2. React是前端组件化框架，由后端组件化发展而来。

9、HoC和mixins

Vue组合不同功能的方式是通过mixin，Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的？比如声明的props怎么接收到的？这些都是vue创建组件实例的时候隐式干的事。由于vue默默帮我们做了这么多事，所以我们自己如果直接把组件的声明包装一下，返回一个HoC，那么这个被包装的组件就无法正常工作了。

React组合不同功能的方式是通过HoC(高阶组件）。React最早也是使用mixins的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了mixinx转而使用HoC。高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。

10、使用场景

（1）选择react

1. 期待构建一个大型应用程序。React的渲染系统可配置性更强，还有诸如浅（shallow）渲染的特性，和React的测试工具结合起来使用，使代码的可测试性和可维护性更好；
2. 期待同时适用于Web端和原生APP的框架。React Native是一个使用Javascript构建移动端原生应用程序（iOS，Android）的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。 如果你学过React.js，很快就能上手React Native。意义在于，开发者只需要一套知识和工具就能开发Web应用和移动端原生应用。
3. 期待最大的生态系统。在NPM上每个月的下载量超过了250万次，相比之下，Vue是22.5万次。这意味着更多的文章，教程，更多的工具和插件可以在项目中使用。React诞生于Facebook，，它的开发者和Facebook都承诺会持续维护React。Vue是独立开发者尤雨溪的作品，规模相对较小。

（2） 选择vue

1. 期待模板搭建应用。模板更容易理解，模板可以更好的把布局和功能分割开来。React应用不使用模板，它要求开发者借助JSX在JavaScript中创建DOM。
2. 期待应用尽可能的小和快。Vue的渲染系统比React的更快。
3. 期待简单和“能用就行”的东西。简单的Vue项目可以不需要转译直接运行在浏览器中。

11、总结

（1）相似之处

1. 利用虚拟DOM实现快速渲染
2. 提供响应式和可组合性的视图组件
3. 他们都是JavaScript的UI框架，专注于创造前端的富应用
4. 不同于早期的JavaScript框架“功能齐全”，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理的处理来自于第三方库。
5. 看到React和Vue都有’props’的概念，这是properties的简写。props允许父组件往子组件传送数据。
6. React和Vue都有很好的Chrome扩展工具去帮助你找出bug。

（2）react

1. 数据流单向
2. React推广了Virtual DOM，并创造了新的语法——JSX，JSX允许开发者在JavaScript中书写HTML
3. React一样由如Facebook这类大公司维护
4. props对于子组件来说是必须的，因为它依赖一个“单一数据源”作为它的“状态”
5. React可以使用Create React App (CRA)
6. 而React的react-router和react-redux则是由社区成员维护，它们都不是官方维护的。
7. React与Vue最大的不同是模板的编写
8. 在React中你需要使用setState()方法去更新状态
9. 多数情况下，框架内置的状态管理是不足以支撑大型应用的，Redux或Vuex等状态管理方案是必须使用的。
10. 更适用于大型应用和更好的可测试性；同时适用于Web端和原生App；更大的生态圈带来的更多支持和工具。

（3）vue

1. 数据双向绑定
2. Vue使用模板系统而不是JSX，使其对现有应用的升级更加容易,这是因为模板用的就是普通的HTML，通过Vue来整合现有的系统是比较容易的，不需要整体重构
3. Vue主要是由一位开发者进行维护的
4. 而在Vue中，props略有不同。它们一样是在组件中被定义，但Vue依赖于模板语法，你可以通过模板的循环函数更高效地展示传入的数据。
5. Vue对应的则是vue-cli
6. Vue的核心团队维护着vue-router和vuex
7. React与Vue最大的不同是模板的编写
8. 在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理。
9. Vue的）解决方案适用于小型应用，但对于对于大型应用而言不太适合。