日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
React還是Vue：你該如何選擇？

本文譯自React or Vue: Which Javascript UI Library Should You Be Using?，原文需翻墻。

我們注重客戶提出的每個(gè)要求，我們充分考慮每一個(gè)細(xì)節(jié)，我們積極的做好成都做網(wǎng)站、網(wǎng)站制作服務(wù)，我們努力開(kāi)拓更好的視野，通過(guò)不懈的努力，創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵(lì)著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),重慶小程序開(kāi)發(fā),網(wǎng)站開(kāi)發(fā),技術(shù)開(kāi)發(fā)實(shí)力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫(kù)的技術(shù)開(kāi)發(fā)工程師。

2016年React鞏固了它作為前端框架之王的地位，這一年中可以看到它在Web端和移動(dòng)端的快速成長(zhǎng)，同時(shí)穩(wěn)穩(wěn)領(lǐng)先于它的主要競(jìng)爭(zhēng)對(duì)手Angular。

但是2016對(duì)Vue來(lái)說(shuō)也是同樣令人印象深刻的一年，它發(fā)布了Vue 2.0版本并且在JavaScript社區(qū)引起了巨大反響，GitHub上多出的25000顆star就是最好的證明。

React和Vue的適用范圍無(wú)疑是很相似的：同樣是基于組件的輕量級(jí)框架，同樣專(zhuān)注于用戶界面的視圖層。同樣可以用在簡(jiǎn)單的項(xiàng)目中，也同樣可以使用全家桶擴(kuò)展為復(fù)雜的應(yīng)用程序。

因?yàn)?，很多Web開(kāi)發(fā)者想知道他們應(yīng)該使用哪個(gè)框架。是其中一個(gè)明顯優(yōu)于另一個(gè)？還是他們有各自的優(yōu)點(diǎn)和坑？或者他們基本就是一個(gè)樣？

兩個(gè)框架 兩個(gè)擁護(hù)者

在本文中，我想用一次公平，徹底的對(duì)比來(lái)回答上面的疑問(wèn)。但是唯一的問(wèn)題是我是一個(gè)Vue粉絲，完全不夠客觀。今年我在項(xiàng)目中重度使用Vue，在Medium上大加贊賞，甚至還發(fā)布了Udemy課程

為了平衡我的偏見(jiàn)，我叫上了我的朋友Alexis Mangin，他是一個(gè)很牛的JavaScript開(kāi)發(fā)者，同時(shí)也是一個(gè)React鐵粉。他同樣沉浸于React中，經(jīng)常在Web端和移動(dòng)端的項(xiàng)目中使用。

有一天Alexis問(wèn)我：“為什么你這么中意Vue，而不是React呢？”那時(shí)候我不太了解React， 沒(méi)辦法給出一個(gè)好的答案。所以我出了一個(gè)主意，找一天時(shí)間，帶上筆記本電腦，互相介紹一下彼此做出選擇的原因。

經(jīng)過(guò)大量的討論和和互相學(xué)習(xí)后，我們找到了6個(gè)關(guān)鍵點(diǎn)。

如果你喜歡用模板搭建應(yīng)用（或者有這個(gè)想法），請(qǐng)選擇Vue

Vue應(yīng)用的默認(rèn)選項(xiàng)是把markup放在HTML文件中。數(shù)據(jù)綁定表達(dá)式采用的是和Angular相似的mustache語(yǔ)法，而指令（特殊的HTML屬性）用來(lái)向模板添加功能。

下面的示例是一個(gè)簡(jiǎn)單的Vue應(yīng)用。它會(huì)展示message和一個(gè)用來(lái)reverse message的按鈕：

 
 
    
  
  
  1. // HTML
    2. 
  
  
    3. 
  
  
  3.   
    {{ message }}
    4. 
  
  
  4.   Reverse Message
    5.
  • // JS
  • new Vue({
  •   el: '#app',
  •   data: {
  •     message: 'Hello Vue.js!'
  •   },
  •   methods: {
  •     reverseMessage: function () {
  •       this.message = this.message.split('').reverse().join('');
  •     }
  •   }
  • });

    • 相比之下，React應(yīng)用不使用模板，它要求開(kāi)發(fā)者借助JSX在JavaScript中創(chuàng)建DOM。下面是用React實(shí)現(xiàn)的同樣的應(yīng)用：

     
 
      
  
  
    1. // HTML
      2.
  • // 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 (
  •       
  •         

    {this.state.message}

  •          this.reverseMessage()}>
  •           Reverse Message
  •         
  •       
  •     )
  •   }
  • }
  • ReactDOM.render(App, document.getElementById('app'));

    • 對(duì)于來(lái)自標(biāo)準(zhǔn)Web開(kāi)發(fā)方式的新開(kāi)發(fā)者，模板更容易理解。但是一些資深開(kāi)發(fā)者也喜歡模板，因?yàn)槟０蹇梢愿玫陌巡季趾凸δ芊指铋_(kāi)來(lái)，還可以使用Pug之類(lèi)的模板引擎。

    但是使用模板的代價(jià)是不得不學(xué)習(xí)所有的HTML擴(kuò)展語(yǔ)法，而渲染函數(shù)只需要會(huì)標(biāo)準(zhǔn)的HTML和JavaScript。而且比起模板，渲染函數(shù)更加容易調(diào)試和測(cè)試。當(dāng)然你不應(yīng)該因?yàn)檫@方面的原因錯(cuò)過(guò)Vue，因?yàn)樵赩ue2.0中提供了使用模板或者渲染函數(shù)的選項(xiàng)。

    如果你喜歡簡(jiǎn)單和“能用就行”的東西，請(qǐng)選擇Vue

    一個(gè)簡(jiǎn)單的Vue項(xiàng)目可以不需要轉(zhuǎn)譯直接運(yùn)行在瀏覽器中，所以使用Vue可以像使用jQuery一樣簡(jiǎn)單。當(dāng)然這對(duì)于React來(lái)說(shuō)在技術(shù)上也是可行的，但是典型的React代碼是重度依賴(lài)于JSX和諸如class之類(lèi)的ES6特性的。

    Vue的簡(jiǎn)單在程序設(shè)計(jì)的時(shí)候體現(xiàn)更深，讓我們來(lái)比較一下兩個(gè)框架是怎樣處理應(yīng)用數(shù)據(jù)的（也就是state）。

    React中的state是不可變（immutable）的，所以不能直接改變，需要使用API中的setState方法：

     
 
      
  
  
    1. this.setState({
      2. 
  
  
    2.     message: this.state.message.split('').reverse().join('')
      3. 
  
  
    3. });
      4.

    React中是通過(guò)比較當(dāng)前state和前一個(gè)state來(lái)決定何時(shí)在DOM中進(jìn)行重渲染以及渲染的內(nèi)容，因此需要不可變（immutable）的state。

    Vue中的數(shù)據(jù)是可變（mutated）的，所以同樣的操作看起來(lái)更加簡(jiǎn)潔。

     
 
      
  
  
    1. // Note that data properties are available as properties of
      2. 
  
  
    2. // the Vue instance
      3. 
  
  
    3. this.message = this.message.split('').reverse().join('');
      4.

    讓我們來(lái)看看Vue中是如何進(jìn)行狀態(tài)管理的。當(dāng)向state添加一個(gè)新對(duì)象的時(shí)候，Vue將遍歷其中的所有屬性并且轉(zhuǎn)換為getter，setter方法，現(xiàn)在Vue的響應(yīng)系統(tǒng)開(kāi)始保持對(duì)state的跟蹤了，當(dāng)state中的內(nèi)容發(fā)生變化的時(shí)候就會(huì)自動(dòng)重新渲染DOM。令人稱(chēng)道的是，Vue中改變state的狀態(tài)的操作不僅更加簡(jiǎn)潔，而且它的重新渲染系統(tǒng)也比React 的更快更有效率。Vue的響應(yīng)系統(tǒng)還有有些坑的，例如：它不能檢測(cè)屬性的添加和刪除和某些數(shù)組更改。這時(shí)候就要用到Vue API中的類(lèi)似于React的set方法來(lái)解決。

    如果你想要你的應(yīng)用盡可能的小和快，請(qǐng)選擇Vue

    當(dāng)應(yīng)用程序的狀態(tài)改變時(shí)，React和Vue都將構(gòu)建一個(gè)虛擬DOM并同步到真實(shí)DOM中。 兩者都有各自的方法優(yōu)化這個(gè)過(guò)程。

    Vue核心開(kāi)發(fā)者提供了一個(gè)benchmark測(cè)試，可以看出Vue的渲染系統(tǒng)比React的更快。測(cè)試方法是10000個(gè)項(xiàng)目的列表渲染100次，結(jié)果如下圖。

    從實(shí)用的觀點(diǎn)來(lái)看，這種benchmark只和邊緣情況有關(guān)，大部分應(yīng)用程序中不會(huì)經(jīng)常進(jìn)行這種操作，所以這不應(yīng)該被視為一個(gè)重要的比較點(diǎn)。但是，頁(yè)面大小是與所有項(xiàng)目有關(guān)的，這方面Vue再次領(lǐng)先，它目前的版本壓縮后只有25.6KB。React要實(shí)現(xiàn)同樣的功能，你需要React DOM（37.4KB）和React with Addon庫(kù)（11.4KB），共計(jì)44.8KB，幾乎是Vue的兩倍大。雙倍的體積并不能帶來(lái)雙倍的功能。

    如果你打算構(gòu)建一個(gè)大型應(yīng)用程序，請(qǐng)選擇React

    像文章開(kāi)頭那種同時(shí)用Vue和React實(shí)現(xiàn)的簡(jiǎn)單應(yīng)用程序，可能會(huì)讓一個(gè)開(kāi)發(fā)者潛意識(shí)中更加傾向于Vue。這是因?yàn)榛谀０宓膽?yīng)用程序第一眼看上去更加好理解，而且能很快跑起來(lái)。但是這些好處引入的技術(shù)債會(huì)阻礙應(yīng)用擴(kuò)展到更大的規(guī)模。模板容易出現(xiàn)很難注意到的運(yùn)行時(shí)錯(cuò)誤，同時(shí)也很難去測(cè)試，重構(gòu)和分解。

    相比之下，Javascript模板可以組織成具有很好的分解性和干（DRY）代碼的組件，干代碼的可重用性和可測(cè)試性更好。Vue也有組件系統(tǒng)和渲染函數(shù)，但是React的渲染系統(tǒng)可配置性更強(qiáng)，還有諸如淺（shallow）渲染的特性，和React的測(cè)試工具結(jié)合起來(lái)使用，使代碼的可測(cè)試性和可維護(hù)性更好。

    與此同時(shí)，React的immutable應(yīng)用狀態(tài)可能寫(xiě)起來(lái)不夠簡(jiǎn)潔，但它在大型應(yīng)用中意義非凡，因?yàn)橥该鞫群涂蓽y(cè)試性在大型項(xiàng)目中變得至關(guān)重要。

    如果你想要一個(gè)同時(shí)適用于Web端和原生APP的框架，請(qǐng)選擇React

    React Native是一個(gè)使用Javascript構(gòu)建移動(dòng)端原生應(yīng)用程序（iOS，Android）的庫(kù)。 它與React.js相同，只是不使用Web組件，而是使用原生組件。 如果你學(xué)過(guò)React.js，很快就能上手React Native，反之亦然。

     
 
      
  
  
    1. // JS
      2. 
  
  
    2. import React, { Component } from 'react';
      3. 
  
  
    3. import { AppRegistry, Text, View } from 'react-native'; 
      4. 
  
  
    4. class HelloWorld extends Component {  
      5. 
  
  
    5.   render() {    
      6. 
  
  
    6.     return (      
      7. 
  
  
    7.               
      8. 
  
  
    8.         Hello, React Native!
      9. 
  
  
    9.       
      10. 
  
  
    10.     );  
      11. 
  
  
    11.   }
      12. 
  
  
    12. }
      13. 
  
  
    13. AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
      14.

    它的意義在于，開(kāi)發(fā)者只需要一套知識(shí)和工具就能開(kāi)發(fā)Web應(yīng)用和移動(dòng)端原生應(yīng)用。如果你想同時(shí)做Web端開(kāi)發(fā)和移動(dòng)端開(kāi)發(fā)，React為你準(zhǔn)備了一份大禮。阿里的Weex也是一個(gè)跨平臺(tái)UI項(xiàng)目，目前它以Vue為靈感，使用了許多相同的語(yǔ)法，同時(shí)計(jì)劃在未來(lái)完全集成Vue，然而集成的時(shí)間和細(xì)節(jié)還不清楚。因?yàn)閂ue將HTML模板作為它設(shè)計(jì)的核心部分，并且現(xiàn)有特性不支持自定義渲染，因此很難看出目前的Vue.js的跨平臺(tái)能力能像React和React Native一樣強(qiáng)大。

    如果你想要最大的生態(tài)系統(tǒng)，請(qǐng)選擇React

    毫無(wú)疑問(wèn)，React是目前最受歡迎的前端框架。它在NPM上每個(gè)月的下載量超過(guò)了250萬(wàn)次，相比之下，Vue是22.5萬(wàn)次。

    人氣不僅僅是一個(gè)膚淺的數(shù)字，這意味著更多的文章，教程和更多Stack Overflow的解答，還意味有著更多的工具和插件可以在項(xiàng)目中使用，讓開(kāi)發(fā)者不再孤立無(wú)援。

    這兩個(gè)框架都是開(kāi)源的，但是React誕生于Facebook，有Facebook背書(shū)，它的開(kāi)發(fā)者和Facebook都承諾會(huì)持續(xù)維護(hù)React。相比之下，Vue是獨(dú)立開(kāi)發(fā)者尤雨溪的作品。尤雨溪目前在全職維護(hù)Vue，也有一些公司資助Vue，但是規(guī)模和Facebook和Google沒(méi)得比。不過(guò)請(qǐng)對(duì)Vue的團(tuán)隊(duì)放心，它的小規(guī)模和獨(dú)立性并沒(méi)有成為劣勢(shì)，Vue有著固定的發(fā)布周期，甚至更令人稱(chēng)道的是，Github上Vue只有54個(gè)open issue，3456個(gè)closed issue，作為對(duì)比，React有多達(dá)530個(gè)open issue，3447個(gè)closed issue。

    如果你已經(jīng)用其中一個(gè)用的很爽，就別變了

    總結(jié)一下，我們發(fā)現(xiàn)的，Vue的優(yōu)勢(shì)是：

    • 模板和渲染函數(shù)的彈性選擇

    • 簡(jiǎn)單的語(yǔ)法和項(xiàng)目配置

    • 更快的渲染速度和更小的體積

    React的優(yōu)勢(shì)是：

    • 更適合大型應(yīng)用和更好的可測(cè)試性

    • Web端和移動(dòng)端原生APP通吃

    • 更大的生態(tài)系統(tǒng)，更多的支持和好用的工具

    然而，React和Vue都是很優(yōu)秀的框架，它們之間的相似之處多過(guò)不同之處，并且大部分的優(yōu)秀功能是相通的：

    • 用虛擬DOM實(shí)現(xiàn)快速渲染

    • 輕量級(jí)

    • 響應(yīng)式組件

    • 服務(wù)端渲染

    • 集成路由工具，打包工具，狀態(tài)管理工具的難度低

    • 優(yōu)秀的支持和社區(qū)

    如果你覺(jué)得我們有所遺漏的話歡迎在評(píng)論中指出。


    文章名稱(chēng)：React還是Vue：你該如何選擇？
    網(wǎng)頁(yè)鏈接：http://www.5511xx.com/article/coogjci.html