2024 年需要了解的 React 功能

React 18 版本看起來是 2022 年的一個很好的版本??偟膩碚f,這個版本功能豐富,易于使用,并且讓社區對開發過程有更大的影響力。讓我們深入了解并詳細探索所有新功能!

并發

此選項是在 React 18 中引入的。React 中的并發意味著兩個任務可以同時進行,并根據緊急程度確定優先級。

過去,React 一次只能執行一個任務。如果任務已啟動,則無法中斷它。那是阻塞渲染。創建 concurrent 模式是為了解決這個問題,并使其能夠中斷和恢復任務。

在最新的React 18版本中,并發模式(concurrent mode)被并發特性(concurrent features)所取代。這些并發特性是并發渲染的基礎。通過這些特性,您可以將某些狀態設置為非緊急狀態,從而提升應用的性能。因此,應用會運行得更好,同時您的瀏覽器也能保持響應狀態。

自動配料

以前,批處理只能用于事件處理程序?,F在,可以自動批處理 Promise、超時和本機事件處理程序。自動批處理將狀態更新分組到單個重新渲染中。因此,自動批處理簡化了應用程序使用新數據的更新,并提高了應用程序的性能。

轉換

這是一個新概念,它定義了對象在應用程序中的行為方式。它們可以是緊急的,也可以是非緊急的。這意味著用戶期望或不期望立即更改。

例如,單擊按鈕時,用戶希望在 UI(用戶界面)中立即響應。同時,頁面外觀的更改允許延遲操作。這是預期轉換的地方。

您可以使用過渡來告知應用程序更新從何處開始、更新如何更改以及要顯示的結果。

值得注意的是,非緊急事件可能會被緊急事件打斷。例如,如果用戶點擊一個按鈕,React 將停止非緊急工作,只呈現最新的更新。

如果數據再次停止,過渡將提示 React 顯示當前內容,同時交付過渡內容。

新 API:Suspense、客戶端和服務端

React 18引入了多項支持并發狀態的功能,這對于性能較弱的設備和網絡連接不佳的環境特別有用。在用戶等待內容加載時,Suspense API可以通知他們內容正在加載中。Suspense API使開發者能夠創建具有更響應式用戶界面且對瀏覽器資源需求更少的應用。在最新版本中,Suspense與過渡效果結合使用效果最佳。

新的 client 方法顯示 React 何時從錯誤中恢復。在服務器端,新的 API 簡化了服務器上的 Suspense 進程。renderToString 方法仍然有效,但不建議使用。

新的嚴格模式行為

嚴格模式是僅限開發的檢查。它有助于解構和重構組件,并第二次恢復以前的狀態。嚴格模式具有以下優勢:

綜上所述,嚴格模式會顯示程序中的問題,有助于簡化開發過程。

2024 年需要了解的 Vue 功能

截至 2023 年,Vue 3 版本是新的默認版本。根據其創建者 Evan You 的說法,Vue 3 更快、更小、易于維護,并簡化了目標原生。與以前的框架版本相比,有以下更新。

組合式 API

API 的新方法允許您基于函數編寫組件。該方法受到 React Hooks 的啟發,是 Vue 3 和 Vue 2.7 的內置功能。組合函數將采用邏輯并在組件之間重用它。

與選項 API 相比,這是另一種編寫組件狀態和邏輯的方法。借助組合式 API,您可以使用導入的函數。同時,Options API 需要聲明 options。

Composition API改變了我們使用Vue的方式,它帶來了更高的靈活性和可擴展性。然而,它仍然與Vue 2的語法和基于選項的API兼容。因此,如果你決定采用這種新方法,你的代碼仍然可以與舊項目兼容。

如果你決定在 Vue 2 項目中使用組合式 API,你可以將其用作插件。此外,您還可以查看組合式 API 庫:VueUse、Vue Composable 和 VueHooks。

盡管組合式 API 改進了開發過程,但作者聲明不會棄用選項 API。這是因為它是 Vue 的一部分,開發人員很樂意使用它。下面,您可以看到組合式 API 的優勢。

Vue 中組合式 API 的優勢

Vite

它是由 Evan You 創建的輕量級構建工具鏈。Vite 為 Vue 3 官方構建設置提供支持。該工具包含一個模塊捆綁器,它將捆綁您的項目。Vite取代了自2021年起進入維護模式的Vue CLI(命令行界面)。因此,除非您依賴于特定的webpack功能,否則建議使用基于Vite的create-vue來啟動項目。

遷移到 Vite 的主要原因是速度方面出色的開發人員體驗。服務器會迅速啟動,因為 Vite 對 JavaScript 模塊有原生瀏覽器支持。

根據 2022 年 JavaScript 現狀,Vite 的留存率和利率最高。

2022 年 Vite 留存率

Pinia

Vue的狀態管理庫Pinia現在已被宣布為默認選項,但它仍然兼容Vue 2和Vue 3。這個庫允許您在組件和頁面之間聲明狀態。Pinia直觀且完全支持類型檢查。

Pinia 取代 Vuex 進行狀態管理。您仍然可以使用 Vuex,但它處于維護模式。因此,它不會獲得新功能。建議將 Pinia 用于新的 Web 應用程序。

Pinia 的優勢:

Vue 3 中的其他變化

Vue 3 中的改進還包括以下內容:

Vue 與 React:詳細比較

讓我們深入研究其他方面以更好地了解 React 和 Vue 并詳細比較它們。

成熟

在為您的 Web 開發項目選擇合適的工具時,請選擇已經證明自己的成熟技術。

使用不成熟的工具時,存在一定的風險,例如:

至于所討論的技術的成熟度,它們大約是在同一時間創建的。ReactJS,即現在的 React,是由 Facebook(現在的 Meta)于 2013 年開發和發布的,而 Vue.js 于 2014 年 2 月發布。

正如你所看到的,Vue 和 React 都已經使用了足夠長的時間,成為成熟的工具。在此期間,他們的初始流程被移除,技術得到了顯著改進。

如前所述,持續的增強使 React 和 Vue 成為用于構建流行的 Web 產品(如 Instagram、Facebook、Gitlab 或 Trivago)的最佳 Javascript 框架。

人氣和社區

那么,React 和 Vue 哪個技術更受歡迎呢?為了回答這個問題,讓我們看看 2022 年 JS 狀況的最新調查結果。

開發人員的保留率和興趣

在這里,我們可以看到 React 和 Vue 在 JS 框架中的留存率和興趣度方面并駕齊驅。

前端框架的留存率排名

來源:2022 年 JS 現狀

開發者對 React 與 Vue 的態度

此外,開發者對使用這兩種技術都持積極態度。例如,57%的受訪者表示會再次使用React。至于Vue.js,有30%的開發者表示會再次使用它,而23%的開發者表示希望學習它。

對流行的前端框架持積極態度

最受推崇和最理想的框架

2023 年 Stack Overflow 開發人員調查也是對流行技術有價值見解的可靠來源。

最近的調查結果顯示,React 和 Vue 在專業開發人員最欽佩的 Web 框架列表中排名第一和第四。

最受推崇和最渴望的 Web 框架

最常用的框架

但是,如果我們看一下最常用的 Web 框架的頂部,我們會得到一些不同的結果。React 排在第一位,而 Vue 則落后。

最常用的 Web 框架

在 Stack Overflow 和 Github 上的受歡迎程度

說明任何特定技術受歡迎程度的另一個因素是在專業論壇上提出的許多問題。

因此,在 StackOverflow 上,#reactjs 中有超過 470,685 個問題。此外,在撰寫文章時,它在 Github 上擁有超過 215,929 顆星。

React社區的規模遠大于Vue.js社區。然而,主要問題在于React的碎片化特性。因此,對于常見問題的反饋獲取相對復雜。

另一方面,Vue 是一個輕量級的漸進式框架,可讓您輕松快速地開發 Web 應用程序。對于新開發人員來說,Vue.js也更容易學習,因為它花費的時間更少,學習曲線也低得多。

說到Vue.js受歡迎程度,#vue.js 年內 StackOverflow 上大約有 106,251 個問題,Github 上有超過 205,884 個星星。

最后,比較 Vue.js 和 React 的最后一個標準是包下載的數量。

下面,您可以看到 npm trends 提供的 npm 包下載計數隨時間變化的統計數據:

React 與 Vue:nmp 包

開發速度和成本

在開發開始時,您需要選擇要采用的 JavaScript 框架/庫。任何網站或 Web 應用程序都可以使用 Vue 和 React 創建。問題是開發速度和成本。

開發速度

我們的經驗表明,Vue.js和React的開發速度相似。關鍵在于有許多額外的庫、框架和包可以幫助您快速構建應用程序。一切都取決于開發者的編碼經驗和技能,這些經驗和技能會讓他們在選擇React還是Vue時有所傾向。但實際上,對于類似任務的時間估計通常是相等的。

成本

成本取決于許多因素,例如開發人員經驗、資歷級別、位置等。所以,它可能會有很大差異。為了記住一些數字,我們將 Codementor 平臺的 VueJS 與 React 的平均成本相加。

React 開發人員的平均費率:

React 開發人員的平均小時費率

來源: codementor.io

Vue 開發者的平均費率:

Vue 開發者的平均時薪

來源: codementor.io

因此,React 開發者的費率略高于 Vue 開發者的費率,這影響了項目成本。

工具

反應

對于 React,開發人員使用一個名為 Create React App 的官方工具。它可以幫助開發人員加速用戶界面開發、添加腳本和安裝必要的依賴項等工作。

在Create React App(CRA)發布之前,每當開發者開始一個新的Web應用程序項目時,他們不得不從以前的應用程序中復制Webpack配置文件和其他.rc文件,或者手動配置所有內容。如果不使用Create React App,你就得把一個項目中的相同配置復制到另一個項目中。這雖然不會花費太多時間,但實際上非常繁瑣。

Create React App 提供了一個 CLI 接口,用于構建具有基本結構的應用程序。它會安裝所有必要的依賴項,并將腳本添加到package.json以運行、測試和構建應用程序。

事實上,React 獲得了對主要 IDE 的大量支持。

Vue

舊版本的 Vue.js 框架建議使用 Vue-CLI,這是一個用于快速創建項目的工具。此類項目具有現成的結構、已安裝的配置以及許多基本文件。

今天,建議使用基于 Vite 的 create-vue,而不是基于 webpack 的 Vue-CLI。Vite 支持 Vue-CLI 的優勢,并提供更好的開發速度。使用 create-vue 腳手架工具初始化 Vite。

Vite 現在是新的默認版本。所以,Vue-CLI 可以保留給舊的應用,但如果你構建新的 Vue 應用,你需要使用 Vite。

靈活性

反應

由于 React 以 UI 為中心,因此最初,你會在構建 UI 組件時獲得幫助。React 的類似 XML 的語法允許創建帶有包含視圖說明的 UI 組件。

但是,React 不為你提供狀態管理。當你處理 React 時,你可以開箱即用地使用 Context API。這有助于您管理狀態。但請記住,此方法最適合小型應用程序。

對于更復雜Web應用的狀態管理,React提供了大量的第三方庫供開發者選用。其中最受歡迎的庫包括Redux、MobX、Recoil和Zustand。Redux被廣泛認為是最佳的選擇,它基于Flux架構模式構建。經驗豐富的開發者會根據項目的具體需求來評估這些庫,并選擇最適合的那一個。

而且,說到 React 路由器,它不是官方包,也是第三方包。

Vue

作為一個動態框架,Vue.js 允許簡單地使用其最基本的工具來創建應用程序。但是,如有必要,它還提供您可能需要的絕大多數功能:

綜上所述,Vue 比 React 更直觀,無論是小型還是大型應用程序。

移動開發

反應

作為移動應用程序開發的工具,React 以 React Native 的形式出現。它是一個使用 JavaScript 創建跨平臺 iOS 和 Android 應用程序的框架。React Native 出現在 2015 年初,基于 React。該框架不使用 WebView 和 HTML 技術,但原生組件在 JS 中具有綁定,并包裝在 React 中。

實際上,iOS 對 React Native 的支持比 Android 更好,但 Android 支持的動態相當有希望。因此,開發人員使用該框架來提供高質量的跨平臺應用程序開發服務。

此外,React 的用例之一是 PWA 開發服務。自 2015 年以來,漸進式 Web 應用程序 (PWA) 已廣為人知。這些應用程序是在 Web 技術(CSS、HTML 和 JavaScript)的幫助下構建的,但其性能與本機移動應用程序類似。

這種方法被全球頂尖的企業廣泛采用,包括阿里巴巴、推特等,以向用戶提供移動體驗。就我們的實踐而言,我們已經成功地為多個領域交付了多個漸進式網頁應用,包括保險、招聘、電子商務平臺開發等。

以下是使用 React 和 Ruby on Rails 構建的活動預訂平臺的漸進式 Web 應用程序示例:

使用 React 構建的 PWA for Activity 預訂平臺

事實上,Codica 團隊提供的許多產品都是 PWA。這不僅節省了最小可行產品開發服務的時間和成本,而且還提供了快速且針對搜索引擎優化的解決方案。

Vue

另一方面,Vue.js 與 NativeScript (NS) 配對,后者允許您使用 XML、CSS 和 JavaScript 構建跨平臺應用程序。NativeScript 解決了與上面提到的 React Native 相同的問題,但它們有一些不同。

為了比較 Vue.js 與 React 的受歡迎程度和開發人員社區的使用情況,讓我們看一下 Google 趨勢圖表。它顯示過去 12 個月的數據。

React native 與 Nativescript 的流行程度 Google 趨勢

來源:谷歌趨勢

總而言之,開發人員對 React Native 表現出更高的興趣。這可以歸因于與 NativeScript 相比,它的性能更好。關于這一優點,我們還提供?React Native 應用程序開發服務,為用戶提供更好的移動體驗。

組件方法

通常,當你為一個組件提供一個文件時,Vue.js 和 React 在開發中都實現了相同的組件方法。仍然有一些不同的方面值得探索。那么,讓我們來看看它們。

反應

關于React,它顛覆了一些已經確立的最佳實踐。幾十年來,開發者們一直試圖將模板和嵌入的JavaScript邏輯分離開來,但在JSX中,這兩者又被混合在一起了。這聽起來可能有些不可思議,但建議你聽聽Peter Hunt的演講“React: Rethinking Best Practices”(React:重新思考最佳實踐)。

他指出,模式和邏輯的分離只是一種技術分工,而不是一種責任。您必須創建組件而不是模板。組件是可重用、可集成的,并且便于進行單元測試。雖然該視頻是 10 年前上傳的,但其中強調的原則在今天仍然適用。

此外,您還可以將組件嵌套在其他組件中。因此,您將使用簡單的構建塊創建復雜的用戶界面。

JSX 是一個可選的預處理器,具有類似 HTML 的語法,然后編譯成 JavaScript。因此,有一些奇怪的地方。例如,您需要使用 className 而不是 class,因為后者是 JavaScript 中的保留關鍵字。

此外,JSX 對于開發來說是一個很大的優勢,因為你會把所有東西都放在同一個地方,而且編譯階段的自動完成和檢查會更快地工作。當你在 JSX 中犯錯時,React 不會編譯代碼并顯示出錯的行號。

Vue

Vue框架提供了“單文件組件”(Single-File Components)的概念。這可以被視為在職責劃分方面的一種折衷方案:模板、腳本和樣式并不完全混合在同一個文件中,而是分布在三個不同的、有序的部分中。這意味著你可以獲得語法高亮、CSS支持,以及輕松使用如Jade或SCSS等預處理器的能力。

各種來源都指出 JSX 更容易調試,因為 Vue 不會在 HTML 中顯示語法錯誤。事實并非如此,因為 Vue.js 將 HTML 轉換為 render 函數;因此,錯誤顯示沒有問題。

組件結構示例

讓我們熟悉一下在 Vue JS 與 React JS 中為待辦事項列表應用程序創建的相同組件,看看 React JSX 和 Vue.js 模板之間的區別。

Vue 組件結構:

Vue 組件結構

React 組件結構:

React 組件結構

Vue 與 React 性能

性能使開發人員能夠創建可提供最佳用戶體驗的應用程序。為了檢查 Vue JS 與 React,我們求助于一個很棒的 js-framework-benchmark,它有助于比較兩個框架的性能。

持續時間(以毫秒為單位)± 95% 置信區間。

React 和 Vue 性能比較
名字Icon React.js反應(毫秒)Icon Vue.jsVue.js(毫秒)
創建行加載頁面后創建 1000 行的持續時間49,7 ± 0.546.0 ± 0.4
替換所有行更新表的所有 1000 行的持續時間(5 次預熱迭代)50.5 ± 0.547,3 ± 0.6
部分更新是時候更新具有 10k 行的表的每 10 行的文本(5 次預熱迭代)了26.0 ± 0.525.0 ± 0
選擇行Duration (持續時間) ,用于響應對行的單擊以響應該行(具有 5 次預熱迭代)6.6 ± 0.24.6 ± 0.2
交換行在 1K 表上交換 2 行的時間(有 5 次預熱迭代)163.0 ± 1.326.0 ± 0.4
刪除行刪除行的持續時間(包含 5 次預熱迭代)21.5 ± 0.721.8 ± 0.6
創建多行創建 10,000 行的持續時間640.1 ± 2.9470.5 ± 2.1
將行追加到大型表在 10,000 行的表上添加 1000 行的持續時間51,8 ± 047,9 ± 0.7
清除行清除填充了 10.000 行的表的持續時間17.1 ± 0.316.4 ± 0.4
啟動時間加載、解析和啟動的時間2,551.8 ± 0.02,101.7 ± 0.0

綜上所述,React 具有出色的性能,但 React 和 Vue 都非常接近。這與特別慢或特別快的開發工具(如 Inferno)相比。

狀態管理

一般來說,這兩種 Web 開發工具都有類似的方法來管理組件的狀態,但在不變性和其他方面仍然存在一些差異。讓我們在 Vue.js 與 React 中考慮所有這些。

創建 UI 很困難,因為狀態無處不在 — 數據會隨著時間的推移而變化,這會導致復雜性增加。當應用程序增長并變得更加復雜時,使用 state 的某些方法會有很大幫助。

狀態管理是如何運作的呢?組件在某一特定時刻描述了用戶界面(UI)的狀態。當數據發生變化時,框架會重新繪制整個UI組件,以確保所顯示的數據始終是最新的。我們可以將這一理念稱為“將UI視為函數”。

換句話說,應用的狀態完全存儲在統一存儲中的對象樹里。這種做法有助于調試應用,同時也使得某些功能的實現變得更加容易。狀態被設置為只讀模式,只能通過動作(actions)來改變,以避免競態條件(這也對調試非常有用)。為了指明動作如何轉換狀態,創建了reducer(歸約器)。

使用 React 創建的 Codica 項目

由于其優勢,React 是我們項目用戶界面的最愛。它的靈活性和健壯性使我們能夠創建具有高性能和出色用戶體驗的應用程序。

當我們開始著手打造域名銷售網站時,我們急需一款工具來優化并提升現有平臺的界面。因此,我們選擇了React。React能夠確保Web應用具備出色的性能和SEO友好性。正是基于這些優點,我們決定采用這個庫來構建市場平臺的前端部分。

因此,該平臺變得更快、性能更高。我們通過添加過濾器來改進搜索,這些過濾器按行業顯示域名并將其分組為 rented、sold 和 deleted。

我們還實現了用于批量更改的工具欄。工具欄菜單允許用戶更改域名列表。因此,您只需一個彈出窗口即可對數千個域名進行調整。

最近使用 React 構建的另一個項目是一個房地產 SaaS 應用程序。該網站具有復雜的功能,包括 3D 游覽。它們向您展示了房產的全貌。

得益于 Jamstack 方法,包括 Gatsby 和 React 技術,盡管它處理了大量數據,但該解決方案仍能快速運行。我們還通過應用最佳開發實踐確保了前端和后端的出色用戶體驗。

該平臺擁有連接房主、租戶和代理人的豐富功能。我們提供了一個方便的菜單,允許您添加有關房產關鍵方面的信息。如有必要,租戶或代理人可以通過直觀的表格與房主進行溝通。

React 與 Vue:比較總結

正如我們上面所討論的,React 和 Vue 具有共同和不同的特征。讓我們總結一下這兩種技術之間的關系。

反應

如前所述,如果你需要構建復雜的 Web 應用程序,例如露營者的在線市場,那么可以選擇 React。它是創建用戶界面的絕佳工具,因此我們使用它來提供定制軟件和 SaaS 開發服務。

由于社區數量眾多,未來的維護和定制要容易得多。有大量的貢獻者和開發人員準備構建任何應用程序。它們的總量大于 Vue 的總量。

選擇 React 的另一個原因是大量的庫和工具可以簡化和加速開發。當現成的解決方案可用時,無需從頭開始編寫函數。

Vue

另一方面,如果您對創建輕量級且易于修復的 Web 應用程序感興趣,Vue.js 是一個不錯的選擇。學習曲線較低。它允許新開發人員在短時間內掌握框架并開始應用程序開發。

Vue 社區比 React 小,但它正在以極快的速度增長。在貢獻量之后,可用的工具和庫的數量也會增加。

為了總結所有的優缺點,讓我們看一下 Vue 與 React 的比較表。

React 和 Vue:總結
標準Icon React反應Icon Vue.jsVue.js
成熟由 Facebook 于 2013 年開發,在 Github 上有 215,929 顆星由 Evan You 于 2014 年開發,在 Github 上 205,884 顆星
社區StackOverflow 上有 470,685 個問題,大約 6,000 個 npm 包StackOverflow 上有 106,251 個問題,大約 6000 個 npm 包
工具官方 CLI 創建 React 應用Vite 和 Vue-CLI
靈活性對于 React 狀態管理,你可以對小型應用程序使用 Context API。對于更復雜的應用程序,您可以使用第三方庫,例如 Redux、MobX、Recoil 和 Zustand對于 Vue 狀態管理,你可以使用 Pinia。它是取代 Vuex 的新標準
移動開發React Native 的 React Native 中。它包括 WebView,它是現代且支持良好的。原生組件在 JS 中具有綁定,并包裝在 React 中NativeScript 的 NativeScript 中。它的語法對于 Web 開發人員使用 HTML/CSS/JavaScript 更容易理解。它使用 Angular 路由器,因此它具有框架功能并可直接訪問本機平臺 API
性能高性能高性能
狀態管理適用于小型應用的上下文 API,以及用于大型應用的 Redux、MobX、Recoil 和 Zustand 庫Pinia 或 Vuex
開發速度和成本提高了最新版本的開發速度。費用取決于任務提高了最新版本的開發速度。費用取決于任務

正如我們所看到的,Vue 和 React 都有強大的工具和功能可以幫助我們進行 Web 開發。但是,在選擇要采用的內容時,您需要牢記表格中顯示的差異以做出正確的選擇。

React 和 Vue 的最佳用例

這兩種 Web 開發工具都可以實現以滿足任何需求和要求。您可以在它們的幫助下構建 Web 應用程序、單頁應用程序和用戶界面組件。

雖然你可以在一個應用程序中包含 React 和 Vue 組件,但在某些情況下,這些技術中的一種是可取的。

以下是考慮選擇 React 或 Vue.js 的不同因素的比較表:

選擇 React 與 Vue 作為您的數字解決方案
選擇您是否:Icon React反應Icon Vue.jsVue.js
選擇靈活性Icon checkIcon check
構建大型生態系統Icon check
更喜歡 JS 和 all-is-javascript 方法Icon check
想要創建干凈的代碼Icon checkIcon check
想要最簡單的學習曲線Icon check
想要最輕量級的框架Icon check
希望在一個文件中進行責任劃分Icon check
開發一個趨于增長的應用程序Icon checkIcon check
想要訪問更大的開發人員社區Icon check
與設計人員合作,需要純 HTML 文件Icon check

最后

綜上所述,Vue 和 React 都是創建復雜 Web 應用程序的強大工具。他們在發展方面已經走了很長一段路。這兩種技術的新版本都有改進,可以幫助開發人員完成工作并改善用戶體驗。

在Codica,我們非常熱衷于React和Vue.js技術,并借助它們構建了許多定制化的解決方案,例如為烘焙行業打造的SaaS平臺。此外,我們還利用這些技術為特定領域,如保險軟件開發,構建解決方案。

原文來源:https://www.codica.com/blog/react-vs-vue/

上一篇:

如何在JavaScript中解析XML(分步指南)

下一篇:

2025年建一個網站需要多少錢?
#你可能也喜歡這些API文章!

我們有何不同?

API服務商零注冊

多API并行試用

數據驅動選型,提升決策效率

查看全部API→
??

熱門場景實測,選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費