您的位置:时时app平台注册网站 > web前端 > vue和react比较

vue和react比较

2019-11-08 03:47

总结:

vue适用于:

1:小型应用;2:如果想将现有应用升级为新的JavaScript框架的话,建议选择vue,因为原有的HTML,整合成vue模板语法较为容易。

 

react适用于:

1:大型应用; 2:Web端和移动端原生APP通吃;

  react是类式的写法,api很少,

对于state的数据变化,Vue比React的重新渲染系统更快更有效率。

区别:

1:vue使用模板语法,和HTML很相似,因此初学者易上手。 

2:react使用JSX,它要求开发者借助JSX在JavaScript中创建DOM。

3:vue更快,这是因为,react渲染是将所有子组件都渲染一遍,如果想要避免不必要的渲染,则需要使用pureComponent或者手动实现shouldComponentUpdate, 而vue优化了这个问题,自动实现了shouldComponentUpdate。

4:react 有react native, 可以构建移动端原生APP。

5:react生态系统更大。

  Vue项目不需要转译可直接在浏览器中使用,这使得在项目中使用Vue可以像使用jQuery一样容易。当然这对于React来说在技术上也是可行的,但典型的React代码是更多地依赖于JSX和诸如class等ES6特性的。而Vue的简单则是更深层地源于其设计的。让我们来比较一下这两个框架是如何处理应用数据的(即“state”):

模板的使用会阻碍应用扩展到更大规模,模板容易出现很难注意到的运行时的错误,同时也很难去测试,重构,分解。

相同点:

1:虚拟DOM实现快速渲染

2:响应式组件

  • 模板和渲染函数的弹性选择

  • 简单的语法及项目创建

  • 更快的渲染速度和更小的体积

使用Vue不需要转译,直接运行在浏览器中,但是React代码重度依赖于JSX和ES6语法。

三、类式的组件写法,还是声明式的写法:

总结一下,我们发现的,Vue的优势是:

图片 1image.png

1.2.1 两者处理数据的方式不一样

  React里的状态是不可变(immutable)的,因此你不能直接地改变它,而是要用setStateAPI方法:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

图片 2image.png
vue结合vue-class-component也可以实现类式的写法,但是还是需要通过decorator来添加声明,并不纯粹。
图片 3

Vue应用默认的是把markup放在HTML中,数据绑定表达式和Angular一样,采用{{}}的形式,而指令(特殊的HTML属性)用来向模板中添加功能

图片 4图片 5
vue的mixin的例子:
图片 6image.png
React刚开始也有mixin的写法,通过React.createClass的api,不过现在很少用了。
Vue也不是不能实现高阶组件,只是特别麻烦,因为Vue对与组件的option做了各种处理,想实现高阶组件就要知道每一个option是怎么处理的,然后正确的设置。具体有多复杂,可以参考下面的文章。

模板可以更好地把布局和功能分隔开,但是需要学习所有的HTML扩展语法,而渲染函数只需要标准的HTML和JavaScript。

  对于来自标准Web开发的新开发者来说,vue是把html,css,js组合到一起,用各自的处理方式,vue有单文件组件,可以把html、css、js写到一个文件中,html提供了模板引擎来处理,模板更容易理解。然而甚至连一些资深的开发者也喜欢使用模板,因为模板能更好地把功能和布局分割开来,还为使用Pug之类的模板引擎提供了可能

//vue
this.message = this.message.split('').reverse().join('');
//React
this.setState({ 
 message: this.state.message.split('').reverse().join('') 
});

  

如何选择

  React应用不使用模板。而是使用JSX在JavaScript中创建DOM。JS操作一切

vue的数据可变,React的数据不可变

**二、简单能用就行-Vue:**

- 模板和渲染函数的弹性选择

  不过Vue的响应系统还是有些坑的,比如它无法检测属性的添加和删除,以及某些数组更改。这时候就要用Vue API中的类似于React的set方法的措施来解决。

React的优势是:

//HTML<div ></div>

//JS
class App extends React.Component {  constructor {    super;    this.state = {      message: 'Hello React.js!'    };  }  reverseMessage() {    this.setState({       message: this.state.message.split.reverse().join('')     });  }  render() {    return (      <div>        <p>{this.state.message}</p>        <button onClick={() => this.reverseMessage()}>          Reverse Message        </button>      </div>    )  }}

ReactDOM.render(App, document.getElementById;

- 更适合大型应用和更好的可测试性

// Note that data properties are available as properties of // the Vue instance

this.message = this.message.split.reverse().join;

两者之间的相同之处

**一、设计思路:**

React是facebook的,会得到全面的支持与维护,vue是尤雨溪

三、页面编写方式:

1.1 如果喜欢用模板搭建应用(或者有这个想法)选择Vue

  而与此相反的是,Vue中的数据是可变的,所以同样的数据变量可以用简洁得多的方式修改:

  • Web端和移动端原生APP通吃
  • 更大的生态系统,更多的支持和好用的工具
  • 然而,React和Vue都是很优秀的框架,它们之间的相似之处多过不同- 之处,并且大部分的优秀功能是相通的:
    * 用虚拟DOM实现快速渲染
    * 轻量级
    * 响应式组件
    * 服务端渲染
    * 集成路由工具,打包工具,状态管理工具的难度低
    * 优秀的支持和社区

  

React Native 是一个使用JavaScript构建出移动端原生应用程序(ios Android)的库,与React。js相同,只是不使用web组件,而是使用原生组件,只要会其中一个,就会另一个,
这样无论是开发web端还是移动端都可以用。

而实际上,React和Vue都是非常优秀的框架,它们之间的相似之处多过不同之处,并且它们大部分最棒的功能是相通的:

带领的小团队维护的。

this.setState({     message: this.state.message.split.reverse().join('') });

1.2 想要简单一点的语法,更快的渲染速度,选择vue

//HTML<div id="app">  <p>{{ message }}</p>  <button v-on:click="reverseMessage">Reverse Message</button></div>

//JSnew Vue({  el: '#app',  data: {    message: 'Hello Vue.js!  },  methods: {    reverseMessage: function () {      this.message = this.message.split('').reverse().join('');    }  }});
<div id="app"></div>
// JS (pre-transpilation)
class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  message: 'Hello React.js!'
 };
 }
 reverseMessage() {
 this.setState({ 
  message: this.state.message.split('').reverse().join('') 
 });
 }
 render() {
 return (
  <div>
  <p>{this.state.message}</p>
  <button onClick={() => this.reverseMessage()}>
   Reverse Message
  </button>
  </div>
 )
 }
}
ReactDOM.render(App, document.getElementById('app'));

  React是通过比较当前状态和前一个状态的区别来决定何时及如何重新渲染DOM的内容,因此需要使用不可变的状态。  

React使用的是JSX语法(在JavaScript中创建DOM),而不使用模板。

  让我们来看看Vue中是如何对状态进行管理的:当你向状态中添加一个新对象时,Vue将遍历其中的所有属性并且将它们转换为getter,setter方法。于是Vue的响应系统开始保持对该状态的跟踪,当该状态的内容发生变化的时候就会自动重新渲染DOM。令人佩服的是,Vue中改变状态的操作不仅更加简洁,而且它的重新渲染系统实际上比React的更快更高效。

同样是基于组件开发的轻量级框架,同样是专注于用户界面的视图view层。

  React和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。

您可能感兴趣的文章:

  • Vue.js 2.0 和 React、Augular等其他前端框架大比拼
  • VueJs与ReactJS和AngularJS的异同点
  • vue,angular,avalon这三种MVVM框架优缺点
  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
  • 在React框架中实现一些AngularJS中ng指令的例子
  • 前端框架学习总结之Angular、React与Vue的比较详解

react可以通过高阶组件(Higher Order Components--HOC)来扩展,而vue需要通过mixins来扩展
一个react高阶组件的例子:

<div> <p>{{ message }}</p>
 <button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JS
new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue.js!'
 },
 methods: {
 reverseMessage: function () {
  this.message = this.message.split('').reverse().join('');
 }
 }
});

  Vue应用的默认选项是把markup放入HTML文件中。数据绑定表达式使用的是与Angular相似的双大括号(moustache)语法,而指令(特殊的HTML属性)则用于向模板中添加功能。

1.3 想要构建一个大型的应用程序,选择React

  

注意:vue2.0提供使用模板和渲染函数的选项

React的优势包括:

具数量统计,React在npm上的下载量为250万/月,vue为22.5万/月

  模板搭建应用。

  • 简单的语法和项目配置
  • 更快的渲染速度和更小的体积
  • 利用虚拟DOM实现快速渲染

  • 轻量级

  • 响应式组件

  • 服务器端渲染

  • 易于集成路由工具,打包工具以及状态管理工具

  • 优秀的支持和社区

1.5 要最大的生态系统,最全面问题解决,更全的工具和插件可以使用React

  • 更适用于大型应用和更好的可测试性

  • 同时适用于Web端和原生App

  • 更大的生态圈带来的更多支持和工具

1.4 想要一个同时适用于web端和原生APP的框架,选择React

图片 7图片 8  react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比。
  而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。  总之,react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue的响应式机制也有问题,就是当state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用一般用react,更加可控

我们发现,Vue的优势包括:

  不过使用模板的代价在于你需要学习所有的HTML扩展语法,而渲染函数(render function)只要求会使用标准的HTML和JavaScript。而且比起模板,渲染函数更易于调试和测试。但是,你并不应该因此就错过Vue,因为在Vue2.0中已经提供了使用模板或者渲染函数的选项

而vue是声明式的写法,通过传入各种options,api和参数都很多。所以react结合typescript更容易一起写,vue稍微复杂。

本文由时时app平台注册网站发布于web前端,转载请注明出处:vue和react比较

关键词: