简易谈谈vue和react的不及,教大家哪些选取Vue和React

by admin on 2019年5月4日

区别:

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

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

三:vue越来越快,那是因为,react渲染是将全数子组件都渲染叁次,要是想要制止不须求的渲染,则要求采纳pureComponent恐怕手动落成shouldComponentUpdate,
而vue优化了这么些主题材料,自动达成了shouldComponentUpdate。

四:react 有react native, 能够营造移动端原生APP。

5:react生态系统越来越大。

  React和vue都是做组件化的,整体的成效都类似,然而他们的图谋思路是有过多两样的。使用react和vue,首如若领略他们的规划思路的例外。

两者之间的同样之处

自家一向利用react,对于vue只是简短学习过,对其精晓不是很深。它们的区分也大多是来自英特网各位牛人的意见。

相同点:

壹:虚拟DOM实现飞快渲染

2:响应式组件

**一、设计思路:**

平等是依照组件开拓的轻量级框架,一样是小心于用户界面包车型地铁视图view层。

1 假诺您喜爱用模板搭建应用(或然有这么些主张),请采取Vue

Vue应用的私下认可选项是把markup放在HTML文件中。数据绑定表达式选取的是和Angular相似的mustache语法,而下令(特殊的HTML属性)用来向模板增加效果。比方:

// HTML
<div id="app">
    <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适用于:

1:小型应用;二:假使想将现成应用晋级为新的JavaScript框架的话,建议选用vue,因为原本的HTML,整合成vue模板语法较为轻巧。

 

react适用于:

1:大型应用; 贰:Web端和平运动动端原生应用程式通吃;

  

何以挑选

二 相比较之下,React应用不使用模板,它须要开辟者借助JSX在JavaScript中创制DOM。上边是用React实现的同1的利用:
// HTML
<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'));
  • 简易谈谈vue和react的不及,教大家哪些选取Vue和React。对于来自专门的学业Web开荒格局的新开采者,模板更便于驾驭。可是部分如雷贯耳开辟者也喜欢模板,因为模板能够更加好的把布局和功力区划开来,还是能够利用Pug之类的沙盘引擎。
  • 唯独使用模板的代价是只好学习抱有的HTML扩展语法,而渲染函数只要求会标准的HTML和JavaScript。而且比起模板,渲染函数尤其便于调试和测试。当然你不应该因为那方面包车型地铁案由错过Vue,因为在Vue2.0中提供了运用模板或然渲染函数的选项。

必发88 1必发88 2  react全体是函数式的观念,把组件设计成纯组件,状态和逻辑通过参数字传送入,所以在react中,是单向数据流,推崇结合immutable来落到实处多少不可变。react在setState之后会重新走渲染的流水生产线,倘诺shouldComponentUpdate重临的是true,就无冕渲染,假设回到了false,就不会再也渲染,PureComponent正是重写了shouldComponentUpdate,然后在里边作了props和state的浅层比较。
必发88 ,  而vue的考虑是响应式的,也正是依附是数量可变的,通过对每3性格质创立沃特cher来监听,当属性别变化化的时候,响应式的翻新对应的虚构dom。  同理可得,react的属性优化内需手动去做,而vue的质量优化是全自动的,然则vue的响应式机制也有标题,正是当state越多的时候,沃特cher也会不知凡几,会招致卡顿,所以大型应用一般用react,特别可控

壹.1 倘诺喜欢用模板搭建应用(或然有这一个主见)选用Vue

叁 借使您喜爱轻便和“能用就行”的事物,请选拔Vue

一个简练的Vue项目能够不须求转译直接运维在浏览器中,所以采取Vue能够像使用jQuery一样简单。当然那对于React来讲在才具上也是可行的,不过规范的React代码是重度依赖于JSX和诸如class之类的ES6特性的。
<b>Vue的总结在先后设计的时候体现更加深,让我们来相比较一下多个框架是什么样管理利用数据的(也正是state)。</b>

  • React中的state是不可变(immutable)的,所以无法直接改换,供给动用API中的setState方法:
    简易谈谈vue和react的不及,教大家哪些选取Vue和React。this.setState({
    message: this.state.message.split(”).reverse().join(”)
    });
  • Vue中的数据是可变(mutated)的,所以同样的操作看起来更为简洁。
    this.message = this.message.split(”).reverse().join(”);
    让大家来看望Vue中是怎样进行状态管理的。当向state增添一个新对象的时候,Vue将遍历当中的兼具属性并且转变为getter,setter方法,未来Vue的响应系统初步保持对state的追踪了,当state中的内容产生变化的时候就能活动重新渲染DOM。令人赞扬的是,Vue中退换state的境况的操作不仅进一步简洁,而且它的重新渲染系统也比React
    的更加快更有功能。

**二、轻便能用就行-Vue:**

Vue应用默许的是把markup放在HTML中,数据绑定表达式和Angular一样,接纳{{}}的格局,而下令(特殊的HTML属性)用来向模板中增多效果

四. 借使您想要你的应用尽恐怕的小和快,请选拔Vue
  • 当应用程序的场所退换时,React和Vue都将构建2个虚构DOM并同步到实在DOM中,Vue的渲染系统比React的更加快。
  • 可是,页面大小是与持有品类有关的,那上边Vue再一次当先,它方今的版本压缩后唯有贰5.六KB。React要落到实处均等的机能,你需求React
    DOM(叁柒.4KB)和React with
    Addon库(1一.4KB),共计4四.八KB,大概是Vue的两倍大。双倍的容积并无法拉动双倍的成效。

  Vue项目没有须要转译可从来在浏览器中应用,那使得在品种中利用Vue能够像使用jQuery同样轻巧。当然那对于React来讲在手艺上也是立竿见影的,但独立的React代码是越多地借助于JSX和诸如class等ES陆个性的。而Vue的简易则是越来越深层地源于其安排的。让大家来相比一下那三个框架是怎样管理利用数据的(即“state”):

<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('');
 }
 }
});
5 如若你准备创设贰个大型应用程序,请选取React。
  • 像文章发轫那种同时用Vue和React完结的归纳应用程序,恐怕会让七个开拓者潜意识中更为倾向于Vue。那是因为依据模板的应用程序第二即时上去更好明白,而且能相当慢跑起来。可是那几个便宜引进的才具债会阻碍应用扩充到越来越大的框框。模板轻便出现很难注意到的运维时不当,同时也很难去测试,重会谈表明。
  • 比较之下,Javascript模板能够团体成具有很好的分解性和干(DRAV四Y)代码的零件,干代码的可重用性和可测试性更加好。Vue也有组件系统和渲染函数,可是React的渲染系统可配置性更加强,还有诸如浅(shallow)渲染的特点,和React的测试工具结合起来使用,使代码的可测试性和可维护性越来越好。

  React里的图景是不可变(immutable)的,因而你无法间接地转移它,而是要用setStateAPI方法:

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

陆 若是您想要2个同时适用于Web端和原生应用程式的框架,请采取React

React Native是1个选用Javascript构建移动端原生应用程序iOS,Android的库。
它与React一样,只是不选取Web组件,而是选用原生组件。
如若你学过React.js,相当慢就能够上手react native,反之亦然。

this.setState({     message: this.state.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'));
7 倘若你想要最大的生态系统,请选取React

  React是由此相比当前情景和前1个场馆包车型地铁区分来调整几时及怎么珍视新渲染DOM的内容,因而需求动用不可变的动静。  

模板能够越来越好地把布局和效果分隔绝,然则急需上学抱有的HTML扩张语法,而渲染函数只须求正式的HTML和JavaScript。

总结:

<b>Vue的优势是:</b>

  • 模板和渲染函数的弹性选取
  • 轻巧易行的语法和项目布局
  • 更加快的渲染速度和更加小的体积

<b>React的优势是:</b>

  • 更符合大型应用和越来越好的可测试性
  • Web端和平运动动端原生应用程式通吃
  • 越来越大的生态系统,更加多的支撑和好用的工具

<b>React和Vue相似处:</b>

  • 用编造DOM完毕高效渲染
  • 轻量级
  • 响应式组件
  • 服务端渲染
  • 集成路由工具,打包工具,状态处理工科具的难度低
  • 优良的帮助和社区

  而与此相反的是,Vue中的数据是可变的,所以同样的数目变量能够用简短得多的办法修改:

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

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

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

1.2 想要轻巧一点的语法,更加快的渲染速度,选择vue

  让大家来探望Vue中是哪些对境况实行管理的:当您向状态中增添三个新对象时,Vue将遍历个中的具有属性并且将它们转变为getter,setter方法。于是Vue的响应系统开头保持对该场所的跟踪,当该景况的内容产生变化的时候就能自动重新渲染DOM。令人钦佩的是,Vue中改动状态的操作不仅进一步从简,而且它的再度渲染系统实际比React的更加快更神速。

运用Vue不供给转译,直接运转在浏览器中,可是React代码重度重视于JSX和ES6语法。

  然则Vue的响应系统也许某些坑的,比方它无法检验属性的丰硕和删除,以及一些数组改动。那时候就要用Vue
API中的类似于React的set方法的点子来消除。

1.二.壹 两者管理多少的章程不一致样

叁、页面编写格局:

vue的数目可变,React的数码不可变

  模板搭建应用。

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

  Vue应用的暗中认可选项是把markup放入HTML文件中。数据绑定表明式使用的是与Angular相似的双大括号(moustache)语法,而下令(特殊的HTML属性)则用于向模板中增加效果。

对于state的数据变化,Vue比React的双重渲染系统越来越快更有效能。

  

1.三 想要营造三个巨型的应用程序,选择React

//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('');    }  }});

模板的使用会阻拦应用扩大到更大局面,模板轻松并发很难注意到的运作时的不当,同时也很难去测试,重构,分解。

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

一.四 想要多少个同时适用于web端和原生APP的框架,选择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;

React Native 是1个行使JavaScript创设出活动端原生应用程序(ios
Android)的库,与React。js一样,只是不利用web组件,而是使用原生组件,只要会个中叁个,就能够另三个,
那样无论开荒web端依然移动端都得以用。

  对于来自职业Web开采的新开采者来讲,vue是把html,css,js组合到手拉手,用各自的管理形式,vue有单文件组件,能够把html、css、js写到3个文书中,html提供了模版引擎来处理,模板更便于了然。不过以致连有个别知名的开辟者也喜好使用模板,因为模板能更加好地把效益和布局分割开来,还为使用Pug之类的模版引擎提供了大概

1.5
最大的生态系统,最完美难点消除,更全的工具和插件能够动用React

  可是使用模板的代价在于你供给学习抱有的HTML增加语法,而渲染函数(render
function)只要求会选用标准的HTML和JavaScript。而且比起模板,渲染函数更易于调节和测试和测试。不过,你并不应该为此就错过Vue,因为在Vue二.0中曾经提供了运用模板可能渲染函数的选料

具数量总括,React在npm上的下载量为250万/月,vue为2二.伍万/月

三、类式的零部件写法,照旧注脚式的写法:

React是facebook的,会收获全面包车型客车帮忙与保障,vue是尤雨溪

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

辅导的小共青团和少先队维护的。

  

总结弹指间,我们发掘的,Vue的优势是:

必发88 3image.png

– 模板和渲染函数的弹性选拔

而vue是注明式的写法,通过传播各样options,api和参数都游人如织。所以react结合typescript更易于一齐写,vue稍微复杂。

  • 粗略的语法和项目配置
  • 更快的渲染速度和更加小的体量

必发88 4image.png
vue结合vue-class-component也能够兑现类式的写法,不过依然必要经过decorator来增多声称,并不纯粹。
必发88 5

React的优势是:

react能够经过高阶组件(Higher Order
Components–HOC)来扩展,而vue需求通过mixins来扩展
多少个react高阶组件的事例:

– 更合乎大型应用和更加好的可测试性

必发88 6必发88 7
vue的mixin的例子:
必发88 8image.png
React刚开首也有mixin的写法,通过React.createClass的api,可是现在很少用了。
Vue也不是不可能促成高阶组件,只是专程麻烦,因为Vue对与组件的option做了各类管理,想完毕高阶组件就要精通每三个option是怎么管理的,然后准确的设置。具体有多复杂,能够参见下边包车型大巴小说。

  • Web端和移动端原生APP通吃
  • 更加大的生态系统,越多的支持和好用的工具
  • 而是,React和Vue都以很杰出的框架,它们中间的相似之处多过差异-
    之处,并且超过十一分之5的能够作用是相通的:
    * 用虚拟DOM完成快捷渲染
    * 轻量级
    * 响应式组件
    * 服务端渲染
    * 集成路由工具,打包工具,状态管理工科具的难度低
    * 特出的帮助和社区

大家发现,Vue的优势包罗:

以上正是本文的全部内容,希望对我们的学习抱有扶助,也盼望大家多多支持脚本之家。

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

  • 大约的语法及项目创立

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

你或者感兴趣的稿子:

  • Vue.js 二.0 和
    React、Augular等此外前端框架大比拼
  • VueJs与ReactJS和AngularJS的异同点
  • vue,angular,avalon那两种MVVM框架优缺点
  • Angular和Vue双向数据绑定的实现原理(入眼是vue的双向绑定)
  • 在React框架中完成部分AngularJS中ng指令的例子
  • 前端框架学习计算之Angular、React与Vue的可比详解

React的优势包涵:

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

  • 而且适用于Web端和原生App

  • 更加大的生态圈带来的更多援助和工具

而实在,React和Vue都以十分精美的框架,它们中间的相似之处多过差异之处,并且它们抢先12分之伍最好的效用是相通的:

  • 运用虚拟DOM完毕快捷渲染

  • 轻量级

  • 响应式组件

  • 劳动器端渲染

  • 轻便集成路由工具,打包工具以及气象管理工科具

  • 能够的帮忙和社区

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图