React与Vue的区别与联系原理

React与Vue的区别与联系原理

• 通常解答:
  • Vue是采用指令结合vue-loader实现构建用户界面的渐进式框架，React是采用jsx构建用户界面的组件化开发

大牛解法

• 在渲染用户界面的时候，DOM的操作是最昂贵，不幸的是没有库可以让这些原始操作变得更快。我们能做的最好的就是尽量减少DOM操作。Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好；

相同点：

• 都支持服务器端渲染
• .都使用虚拟DOM来实现
• 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
• 只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。
• .都是JavaScript的UI框架，数据驱动视图，专注于创造前端的富应用
• 都有支持native的方案,React的React native,Vue的weex
• 都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）

---

• 解析点如下:

在 React 中，所有的组件的渲染功能使用的都是JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖，它可以使用的完整的编程语言JavaScript来构建视图页面，工具对JSX的支持相比于现有可用的其他Vue模板还是比较先进的，在 Vue 中我们采用的 Web 技术并在其上面扩展，使用Template在写模板的过程中，样式风格已确定和更少地涉及业务逻辑,一个模板总是被声明的,模板中任何 HTML 都是有效的,相比之下，React功能没有 Vue 模板系统的丰富。需要从组件文件中分离出HTML代码

重点

• 在性能方面，当我们考虑重新渲染功能。当组件的状态发生变化时，React的机制会触发整个组件树的重新呈现，并且由于 React 有大量的检查机制，能让它提供许多有用的警告和错误提示信息，但可能需要使用额外的属性来避免不必要地重新渲染子组件。虽然Vue的重新渲染功能是开箱即用的，但Vue提供了优化的重新渲染，其中系统在渲染过程中跟踪依赖关系并相应地工作。

• 解析点如下

在React中应用中的状态是（React）关键的概念。也有一些配套框架被设计为管理一个大的state对象，如Redux。此外，state对象在React应用中是不可变的，意味着它不能被直接改变（但是=赋值的时候是可以改变的 只是不会重新渲染页面）。在React中你需要使用setState()方法去更新状态；在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理，而在Vue中，则不需要使用如setState()之类的方法去改变它的状态，在Vue对象中，data参数就是应用中数据的保存者

不同点：

• React严格上只针对MVC的view层,Vue则是MVVM模式
• virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
• 而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
• 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
• Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件;
• 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
• state对象在react应用中不可变的,需要使用setState方法更新状态;
• 在vue中,state对象不是必须的,数据由data属性在vue对象中管理

解法对比及优缺点

• 在以下场景中，Vue比React更好：

  • 最新文档和更简单的语法。更小，更快速，更灵活。丰富的HTML模板，易于开发。

• React比Vue.js好：

  • 需要构建移动应用程序。专业和出色的社区支持，以解决任何问题。需要构建大型应用程序。轻量级，易于版本迁移