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，分别代表新旧节点。

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

2. 数据流的不同

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

3、渲染过程不同

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

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

4、Vuex和React-Redux的区别

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

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

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

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

vuex的流程：

5、组件写法差异

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

JSX：

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

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

javascript">const element = <h1>Hello, world!</h1>;

6、核心思想不同

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

7、组件的导入

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

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

下面的区别可不看

8、框架本质不同

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

9、HoC和mixins

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

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

10、使用场景

（1）选择react

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

（2）选择vue

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