干貨!教大家如何選擇Vue和React
兩者之間的相同之處
同樣是基于組件開發(fā)的輕量級框架,同樣是專注于用戶界面的視圖view層。
如何選擇
1.1 如果喜歡用模板搭建應(yīng)用(或者有這個想法)選擇Vue
Vue應(yīng)用默認的是把markup放在HTML中,數(shù)據(jù)綁定表達式和Angular一樣,采用{{}}的形式,而指令(特殊的HTML屬性)用來向模板中添加功能
<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('');
}
}
});
React使用的是JSX語法(在JavaScript中創(chuàng)建DOM),而不使用模板。
<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'));
模板可以更好地把布局和功能分隔開,但是需要學(xué)習(xí)所有的HTML擴展語法,而渲染函數(shù)只需要標(biāo)準(zhǔn)的HTML和JavaScript。
注意:vue2.0提供使用模板和渲染函數(shù)的選項
1.2 想要簡單一點的語法,和更快的渲染速度,選擇vue
使用Vue不需要轉(zhuǎn)譯,直接運行在瀏覽器中,但是React代碼重度依賴于JSX和ES6語法。
1.2.1 兩者處理數(shù)據(jù)的方式不一樣
vue的數(shù)據(jù)可變,React的數(shù)據(jù)不可變
//vue
this.message = this.message.split('').reverse().join('');
//React
this.setState({
message: this.state.message.split('').reverse().join('')
});
對于state的數(shù)據(jù)變化,Vue比React的重新渲染系統(tǒng)更快更有效率。
1.3 想要構(gòu)建一個大型的應(yīng)用程序,選擇React
模板的使用會阻礙應(yīng)用擴展到更大規(guī)模,模板容易出現(xiàn)很難注意到的運行時的錯誤,同時也很難去測試,重構(gòu),分解。
1.4 想要一個同時適用于web端和原生APP的框架,選擇React
React Native 是一個使用JavaScript構(gòu)建出移動端原生應(yīng)用程序(ios Android)的庫,與React。js相同,只是不使用web組件,而是使用原生組件,只要會其中一個,就會另一個,
這樣無論是開發(fā)web端還是移動端都可以用。
1.5 要最大的生態(tài)系統(tǒng),最全面問題解決,更全的工具和插件可以使用React
具數(shù)量統(tǒng)計,React在npm上的下載量為250萬/月,vue為22.5萬/月
React是facebook的,會得到全面的支持與維護,vue是尤雨溪
帶領(lǐng)的小團隊維護的。
總結(jié)一下,我們發(fā)現(xiàn)的,Vue的優(yōu)勢是:
- 模板和渲染函數(shù)的彈性選擇
- 簡單的語法和項目配置
- 更快的渲染速度和更小的體積
React的優(yōu)勢是:
- 更適合大型應(yīng)用和更好的可測試性
- Web端和移動端原生APP通吃
- 更大的生態(tài)系統(tǒng),更多的支持和好用的工具
- 然而,React和Vue都是很優(yōu)秀的框架,它們之間的相似之處多過不同- 之處,并且大部分的優(yōu)秀功能是相通的:
* 用虛擬DOM實現(xiàn)快速渲染
* 輕量級
* 響應(yīng)式組件
* 服務(wù)端渲染
* 集成路由工具,打包工具,狀態(tài)管理工具的難度低
* 優(yōu)秀的支持和社區(qū)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue學(xué)習(xí)筆記之過濾器的基本使用方法實例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之過濾器的基本使用方法,結(jié)合實例形式分析了vue.js過濾器的基本功能、用法與操作注意事項,需要的朋友可以參考下2020-02-02
VueX學(xué)習(xí)之modules和namespacedVueX詳細教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06
vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁中實現(xiàn)一個金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細的實例代碼以及圖文將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下2023-04-04
Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用
這篇文章主要給大家介紹了關(guān)于Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用Vue CLI3具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06

