為什麼我不再用Vue，改用React？

雲栖号資訊：【 點選檢視更多行業資訊

】

在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！

當我走進現代前端開發行業的時候，我做了一個每位開發人員都要做的決策：選擇一個合适的架構。當時正逢 jQuery 被淘汰，前端開發者們不再用它編寫難看的、非結構化的老式 JavaScript 程式了。前端正在走向一個時髦的，流行的，子產品化的 JavaScript 架構的新時代。是以我選擇了 VueJS。

下面就是我熱愛（現在還是愛着）VueJs 的原因所在。

1. 它将 HTML/CSS/JS 結構結合到一起

目前來看，這是 VueJS 最吸引人的優勢。

Vue 檔案對初學者非常有吸引力。它易于了解，而且我們很容易将整個 HTML 模闆分解為許多 Vue 檔案。我一眼就能看出來結構（模闆）、行為（腳本）和外觀（樣式）。

<template>
<div id="myComponent">
  <Counter />
  <span v-if="reading">Hello reader !</span>
</div>
</template>
<script>
import Counter from "@/components/Counter";
export default {
  name: "myComponent",
  components: {
    Counter
  }
}
</script>
<style>
#myDiv {
  display: block;
}
</style>           

1. Vuex

   我開始了解狀态管理系統時是從 Redux 入門的。它很難學，而且似乎過于複雜。但有了 Vuex，體驗就太棒了。

Redux 需要 action、reducer 和 store，而 Vuex 隻有 action、mutation 和 store。相比 mutation，reducer 的邏輯實在很難了解，因為在我學習後者時，很少見到優秀的學習資源。在我看來，Vuex 對于新手來說更容易上手。

1. NuxtJS

   老實說，受 React NextJS 啟發的 NuxtJS 是我在 Vue 項目中的預設架構。我喜歡 Nuxt 項目的約定優于配置的架構。

頁面位于 page 目錄下。元件位于 component 目錄。存儲在 store 目錄中。中間件則在 middleware 目錄裡，依此類推。

所有注入都是透明的。所有配置都在 nuxt.config.js 裡。太棒了！它使你可以輕松建構啟用 SSR 的網站和 SPA。

然而，我又試了一下 React

在學習 Vue 之前我也嘗試過 React，但後者初看上去太難學了。随着時間推移，我更深入了解了狀态管理機制和 ES6 語言規範，于是我對 React 的看法也有了變化。

我看到有很多文章在推薦 React，甚至我周圍的人都在談論 React，是以我嘗試了一下。結果很不錯，于是我開始在項目中使用這個架構。下面是我眼中 React 一些最明顯的優勢。

1. 對 ES6 和 TypeScript 友好

   開發人員掌控類、接口和枚舉。是以我很容易就能了解 React 元件的工作機制，并知道該如何将其內建到應用程式中。

你也可以在 Vue 中使用 ES6 文法，但是 React 比 Vue 設計得更好。看一下如何在 React 中注冊元件：

class MyComponent extends React.Component {
  render() {
    return(<div />)
  }
}           

對于 VueJS，你将一個對象傳遞給 Vue Component 函數：

Vue.component({
  template: `<div></div>`
})           

也就是說，現代 React（2020 年）不再用到 class，而是使用函數式元件（和 hooks）。

VueJs 現在提供了 TypeScript 支援。但這種支援不像 React 那樣自然，後者隻需 一條指令 就能使用 CRA（Create React App）獲得 TS 支援。

在 Vue 這邊，我們仍然需要一些帶有自定義裝飾器和特性的第三方包來建立一個真正完善的 TypeScript 應用程式，并且它的官方文檔并未包含入門所需的所有資訊。

1. JSX

   JSX 并非惡魔。有兩個流派：親 JSX 和反 JSX。我不想卷進他們的戰争。JSX 可以是天使也可以是惡魔，具體取決于你要如何使用模闆。

從我的角度來看，對于開發人員來說，編寫像下面這樣的 JSX 更加合乎邏輯：

return (
  <div>
    {students.map(student => <p>{student}</p>)}
  </div>
)           

比 Vue 的方式更像 HTML：

<div>
  <p v-for="student in students">{{ student }}</p>
</div>           

蘿蔔青菜各有所愛；在我個人看來，JSX 更強大，更靈活。

1. 省事的 Hooks

   我開始學習使用 React 元件做開發。問題在于，要建立單個元件作為一個 React 元件類是很費事的。

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  render() {
    return(<div/>)
  }
}           

函數式元件讓你可以使用帶有 hooks 的局部狀态。它移除了很多樣闆和無用的構造器。

function MyComponent() {
  const [counter, setCounter] = useState(0)

  return(<div />)
}           

React Hooks 簡化了狀态和其他 React 部件（如 useEffect）的應用，現在我們用不着 componentDidMount 和 componentDidUpdate 了。一些開發人員喜歡 OOP 方法，是以繼續使用 class；而其他開發人員則偏愛函數式方法。你可以在項目中同時使用兩者！

1. 社群

   偉大的項目背後都有很多偉大的頭腦。

根據我的經驗，React 的文檔、第三方工具和子產品要比 Vue 多得多。有時，我會為很多 Nuxt 問題而掙紮許久，搜尋解決方案的過程中還會發現很多 Next（React）主題。

看看 Github 倉庫，數字可以說明一切。

Vue 3 即将到來……

Vue 3 中有很多重大更改，其中之一是 Composition API，有了它你就可以無需 Vuex 來管理狀态；還有很多很棒的特性即将到來！

四月份，尤雨溪曾在直播中表示，目前的 Vue 3.0 已經可以投入使用，但是要求開發者自己對穩定性負責。他建議生産項目暫時不要上，新的、小的項目可以試水。

《尤雨溪B站直播，Vue 3.0 Beta是一個值得體驗的全新版本》

那麼，我喜歡 VueJS 嗎？是的。我喜歡 React 嗎？喜歡。React 比 Vue 更好嗎？那就見仁見智了。

【雲栖号線上課堂】每天都有産品技術專家分享！

課程位址：

https://yqh.aliyun.com/zhibo

立即加入社群，與專家面對面，及時了解課程最新動态！

【雲栖号線上課堂 社群】

https://c.tb.cn/F3.Z8gvnK

原文釋出時間：2020-06-28

本文作者：Alexandre Lion

本文來自：“

InfoQ

”，了解相關資訊可以關注“[InfoQ](

https://mp.weixin.qq.com/s/mW2msPR8VE7Bl3fhDkBrOw

）