1. 首頁 > 生活百科 > >

京東云開發者｜關于“React 和 Vue 該用哪個”我真的栓Q( 三 )

生活百科

樣式隔離方案

    • React：CSS moduleCSS in JSBEM 命名規范
    • Vue：官方支持 Style scopedBEM 命名規范
TS支持
    • React本身就是 Js 和 Jsx，并且 TS 專門開了后門給做了支持（Jsx 其實一開始沒有類型支持，Tsx 的開發體驗完全來自于 TS 專門針對 Jsx 制定的一整套推導機制），所以Tsx 的類型支持也很完善 。
    • Vue2.x來自尤雨溪本人的回答是“因為當初API的設計根本就沒有考慮類型系統”，2.x 跟 TS 的整合需要借助 vue-class-component 使用類組件進行開發，所以目前 2.x 版本的Vue對 TS 的支持度較React仍有差距，但是最近隨著Vue2.7的發布，可以使 Vue2.x 用上大部分 Vue3 的寫法，也使 Vue2.x 就具備了兼容 TS 的能力 。
    • Vue3，根據來自官方的建議，IDE 支持需用<script setup lang="ts">+vscode+volar，一樣能獲得非常好的 TS 體驗 。
文檔體驗（這里僅指中文文檔）
    • React：中規中距，案例仍然不夠豐富，對于一些問題的答案需要借助社區，好在社區足夠強大，屬于疑難雜癥的問題也能找到解決方案 。
    • Vue：文檔體驗十分優秀且全面，介紹詳細，幾乎各種疑問均能找到答案 。
5.周邊配套React
    • 路由管理
    • React-router 實現了核心路由功能 。React-router-dom 基于 React-router 開發，加入了在瀏覽器運行環境下的一些功能，如使用 Link 組件在瀏覽器中會渲染一個 a 標簽，也支持 History 和 Hash 路由模式 。React-router-native 同樣基于 React-router 開發，主要是集成了 React-native 運行環境下的功能 。
    • 狀態管理
    • Redux 基礎的狀態管理庫 ， 引入了中間件 ， 中間件位于視圖層發出 action 后 ， 到 reducer 之前觸發 ， 在中間件中可以執行比如日志打印、異步請求等操作 。原流程：view -> action -> reducer -> store中間件流程：view -> action -> middleware -> reducer -> store
    • React-Redux 是 Redux 的插件庫 ， 用來簡化 Redux 。
    • Redux-thunk 用來處理異步的中間件 。
    • Redux-saga 內部基于 generator 實現，用于管理 Redux 應用異步操作的中間件，與 thunk 不同點在于：thunk 是在 action 創建時調用，saga 是在應用啟動時調用 。在 saga 中，任務都是通過 yield Effects 來完成的 。
    • Mobx 不同于 Redux 狀態管理方案，使用相對簡單，是以數據驅動視圖，通過數據綁定，只修改數據本身即可實現視圖的更新 。
  • Vue
    • 路由管理Vue router：官方支持
    • 狀態管理Vuex：官方支持
6. 跨端處理React
  • App：在跨 App 界的一哥是ReactNative，以下簡稱 RN，因為筆者沒有親自體驗過，所以不做過多闡述，但是鑒于 RN 是2015年4月問世，時間不短，并且也有足夠的團隊使用，目前看來在前端跨端的領域成熟度已經相當高了 。
  • 小程序：對React支持度最好的當然是Taro了，一直在持續迭代中，也有來自京東凹凸實驗室的背書，擁有較為穩定的產品和活躍社區，開發者可以大膽嘗試，在最近迭代的Taro3 里也添加了對Vue3的支持 。
Vue
  • App：的跨端嘗試中沒有占據絕對地位的框架，Weex 火過一陣，但是近些年熱度下降，并且在 Apache Incubator 也已退休，雖然有阿里的背書，但是隨著參與者減少，加上也不斷聽說阿里內部逐漸放棄 Weex 的傳言，Github倉庫最近一個更新也是1年前，前景未知，不推薦嘗試 。Vue在最新的官方文檔中推薦的跨端方案是 NativeScript 和 Capacitor，感興趣的小伙伴可以自行查看 。
  • 小程序：一種較為流行的跨端方案是 Uni-app，在兼容多端小程序上有較好的體驗，對 Vue2 和Vue3有著天然友好的支持度，并且依照評測也提供著非常不多的性能（評測鏈接https://juejin.cn/post/6844904118901817351），文檔體驗著實是一言難盡……同時也支持 App 應用的開發 。另一種跨端方式是 Mpvue，來自美團，從 Github 的倉庫看已經很久未曾更新，也就不做推薦了 。
  • 多說幾句在這里還要多啰嗦一下關于框架的跨端的個人理解，框架如果想跨端，那么在設計之初就要做核心與平臺分離的設計，虛擬 DOM 就是一個非常典型的例子，它可以存儲所有與 UI 的所有信息和交互邏輯，而在它上層與平臺強相關的部分負責具體平臺的邏輯實現，這也是典型的分層設計 。
7. 設計思路