1. 首頁 > 生活百科 > >

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

生活百科


4.使用層面對比框架引入

    • React和Vue都是漸進式框架，支持 script 標簽直接使用，也支持在工程中通過模塊化方式引入使用 。
Jsx VS Template
    • React：采用的 Jsx 在寫法上更為靈活多變，屬于在 Js 中增加了 HTML 語法，組件的實現思路是All in Js，開發過程中擁有 Js 完整的生態 。同時開發工具對 JSX 的支持相比于現有可用的其他Vue模板也比較先進 (比如 ， linting、類型檢查、編輯器的自動完成) 。
    • Vue：整體思路是 Template 模板語法，跟 Jsx 相比，它是在 HTML 中增加了對部分 Js 語法的支持 ， 在靈活度上不如 Jsx，本質是模板語法無法窮舉所有 Js 能力，所以筆者認為Vue內部使用的 slot、directive 等 ， 也恰恰是對模板語法不夠靈活所做出的一種補充，使模板語法也能完成跟 Jsx 同樣的事情 。模板語法也有優點，它更接近原生 HTML ， 對于新手上手更友好，并且在Vue3中，它從模版層面進行靜態分析，對靜態模版做標記，從而提升 diff 的效率 。值得一提的是，與React一樣，Vue 在技術上也支持 render 函數和 Jsx ， 但只是不是默認的而已 。
那么你可能會有疑問，為什么 Template 不去適配所有的 Js 語法？這里舉一個例子：Taro 。
Taro1.x 和 Taro2.x 采用了窮舉所有 Jsx 語法的方式，去生成不同平臺的代碼 ， 導致每次 Jsx 或 Js 語法有更新，這兩個版本的 Taro 編譯器都要同步去做適配，這是一種重編譯時的方案 ， 對 Jsx 的支持其實非常痛苦，所以 Taro3 索性采取了重運行時、輕編譯時的重構，以獲得編譯器對 Jsx 更有好的支持 。并且還有另一個原因是 ， 我們假如 Template 支持了所有 Js 能力，那么勢必又導致了 Template 語法變得復雜，也可能和原本統一的 Ecma 規范割裂（層出不窮的小程序就是一個典型的例子，相當于規范之中又出規范，生態之外再造生態） ， 造成了學習成本增加和沉重的編譯器 。
    • 共性也是有的，都是 DSL，對底層而言，雖然兩者采用了不一樣的方式實現 ， 但最終都會被編譯為渲染函數去執行 。
    • 下圖是 Jsx 語法示例：

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

文章插圖
    • 下圖是 Template 語法示例：

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

文章插圖
SFC
    • HTML：React是 Jsx，Vue 是默認的 Template，在這里不在贅述區別，同時需要指出的是 ， Vue3 相較Vue2而言，Template 下可以允許存在多個根節點，可以減少一些不必要的 DOM 層級 。
    • JS：React 組件本身就是 JS 文件，形式采用函數組件和類組件，編程范式上更貼近面向對象 + 官方推崇的函數式 。Vue2組件是 Options Api，通過一個個配置項去實現生命周期、狀態聲明和邏輯開發 。Vue3對于部分邏輯處理和Vue2有很大區別 ， setup 模式下，已經和React越來越趨同了，編程范式是面向過程 + 函數式，官方命名為 Composition Api，可以使同一個功能邏輯更加集中 。
    • CSS：React的 CSS 使用方式是直接通過 Import 導入 ， Vue文件中有專門處理樣式的 Style 標簽 ， 值得一提的是，Vue3內置狀態驅動的動態 CSS，詳細可查看官方文檔（https://cn.vuejs.org/api/sfc-css-features.html） 。
    • 其他思考：React 的函數式組件和Vue3Composition Api，在 ESM 模塊規范下對Tree-shaking 更友好，更容易減少構建體積 。
組件使用
    • React組件僅需引入即可使用 。
    • Vue的組件引入后需要全局或局部注冊 ， 且組件內的 Props 的要顯式聲明 。
邏輯復用