ASP.NET Web API快速入門介紹
React 18版本無疑是2022年的一大亮點，其豐富的功能、易用性和對社區開發過程的深遠影響都讓人印象深刻。現在，讓我們聚焦于React 18的新功能，一同深入探索！
React 18引入了并發這一全新概念。在React中，并發意味著兩個任務可以并行執行，并根據任務的緊急程度來動態調整優先級。這一特性打破了React過去一次只能執行一個任務的限制，有效解決了阻塞渲染的問題。concurrent模式應運而生，它允許任務的中斷和恢復，從而提高了應用的響應速度和性能。
在React 18中，并發模式進一步升級為并發功能，這些功能構成了并發渲染的基石。通過將狀態設置為非緊急狀態，開發者可以充分利用這些功能來提升應用的性能，確保應用在復雜場景下依然流暢運行，同時保持瀏覽器的響應速度。
以前，批處理只能用于事件處理程序。現在，可以自動批處理 Promise、超時和本機事件處理程序。自動批處理將狀態更新分組到單個重新渲染中。因此，自動批處理簡化了應用程序使用新數據的更新，并提高了應用程序的性能。
這一核心概念，在應用程序中定義了對象的行為模式。它分為緊急與非緊急兩類，反映了用戶期望的即時性或可延遲性更改。
在用戶界面中，緊急轉換如按鈕點擊，用戶期望獲得即時反饋。相反，頁面外觀的微調則允許一定的延遲，這正是預期轉換的應用場景。
通過過渡機制，開發者能夠明確指定應用程序更新的起點、變更方式及最終呈現結果。重要的是，非緊急任務在緊急任務到來時可能會被中斷。例如，當用戶點擊按鈕時，React 會暫停非緊急工作，優先呈現最新更新。
若數據更新暫停，過渡機制將引導 React 顯示當前內容，并同時準備過渡內容。
尋找專業的 React 開發團隊？我們隨時待命，助您一臂之力。讓我們深入交流，共謀發展。
React 18 引入了幾個允許并發狀態的功能。它對于較弱的設備和不良的連接很有用。當用戶等待加載內容時，Suspense API 會讓他們知道內容正在發送中。Suspense API 允許開發人員創建具有響應速度更快的 UI 且需要更少瀏覽器容量的應用程序。在最新版本中，Suspense 最適合使用過渡。
新的 client 方法顯示 React 何時從錯誤中恢復。在服務器端，新的 API 簡化了服務器上的 Suspense 進程。renderToString 方法仍然有效，但不建議使用。
嚴格模式是React為開發階段提供的檢查工具，旨在幫助開發人員解構和重構組件，并恢復以前的狀態。嚴格模式具有以下優勢：
綜上所述，嚴格模式能夠揭示程序中的問題，從而簡化開發過程。
截至 2023 年，Vue 3 版本是新的默認版本。根據其創建者 Evan You 的說法，Vue 3 更快、更小、易于維護，并簡化了目標原生。與以前的框架版本相比，有以下更新。
Composition API，這一Vue 3及Vue 2.7的內置功能，受React Hooks啟發，允許開發者以函數為基礎編寫組件。它通過將邏輯封裝在組合函數中，實現了組件間的邏輯重用。
與傳統的選項API相比，組合式API提供了另一種編寫組件狀態和邏輯的方法。它支持使用導入的函數來組織代碼，而選項API則需要通過聲明options來組織。
Composition API的引入，極大地改變了Vue的使用方式，帶來了更高的靈活性和可擴展性。同時，它保持了與Vue 2語法及基于選項的API的兼容性，確保新代碼能在舊項目中無縫運行。
對于Vue 2項目，開發者可以通過插件形式引入組合式API。此外，還有多個組合式API庫可供選擇，如VueUse、Vue Composable和VueHooks，進一步豐富了開發者的工具集。
盡管Composition API 改進了開發過程，但作者聲明不會棄用選項 API。這是因為它是 Vue 的一部分，開發人員很樂意使用它。下面，您可以看到組合式 API 的優勢。
Vite，由Evan You創建，是一款專為現代前端開發設計的輕量級構建工具鏈。它特別為Vue 3提供了官方構建設置支持，并內置了一個高效的模塊捆綁器，用于項目打包。隨著Vue-CLI自2021年起進入維護模式，Vite已成為其理想的替代方案。因此，對于新項目，建議使用基于Vite的create-vue工具進行初始化，除非項目特定依賴于webpack的高級功能。
Vite的核心優勢在于其卓越的開發人員體驗，尤其在速度方面表現突出。得益于對JavaScript模塊的原生瀏覽器支持，Vite能夠迅速啟動開發服務器，顯著提升開發效率。
根據 2022年JavaScript現狀，Vite 的留存率和利率最高。
Pinia，這一專為Vue設計的狀態管理庫，現已被正式確立為默認推薦。它全面兼容Vue 2與Vue 3，能夠在組件與頁面間高效聲明狀態。Pinia以其直觀設計和全面類型化特性脫穎而出。
相較于Vuex，Pinia已成為狀態管理的新寵。雖然Vuex仍可使用，但它已進入維護模式，不再添加新功能。因此，對于新Web應用，Pinia無疑是更佳選擇。
Pinia 的優勢：
Vue 3 中的改進還包括以下內容：
讓我們深入研究其他方面以更好地了解 React 和 Vue 并詳細比較它們。
在為您的 Web 開發項目選擇合適的工具時，請選擇已經證明自己的成熟技術。
使用不成熟的工具時，存在一定的風險，例如：
至于所討論的技術的成熟度，它們大約是在同一時間創建的。ReactJS，即現在的 React，是由 Facebook（現在的 Meta）于 2013 年開發和發布的，而 Vue.js 于 2014 年 2 月發布。
在各自的發展過程中，React和Vue都經歷了不斷的優化和增強，逐漸剔除了早期的不足。如今，它們已成為構建流行Web產品（如Instagram、Facebook、GitLab和Trivago）的首選JavaScript框架。
為了解答React與Vue哪個技術更受歡迎的問題，我們參考了2022年JS狀況的最新調查結果。
開發人員的保留率和興趣
在這里，我們可以看到 React 和 Vue 在 JS 框架中的留存率和興趣度方面并駕齊驅。
開發者對 React 與 Vue 的態度
此外，開發人員還表達了他們對使用這兩種技術的積極態度。例如，57%的受訪者表示愿意再次選擇React進行項目開發。而在Vue.js方面，30%的開發者表示會繼續使用，另有23%的開發者表達了對學習Vue.js的濃厚興趣。
最受推崇和最理想的框架
2023 年 Stack Overflow 開發人員調查也是對流行技術有價值見解的可靠來源。
最近的調查結果顯示，React 和 Vue 在專業開發人員最欽佩的 Web 框架列表中排名第一和第四。
最常用的框架
但是，如果我們看一下最常用的 Web 框架的頂部，我們會得到一些不同的結果。React 排在第一位，而 Vue 則落后。
在 Stack Overflow 和 Github 上的受歡迎程度
評估技術受歡迎程度的另一重要指標，是在專業論壇上的提問數量。
因此，在 StackOverflow 上，#reactjs 中有超過 470,685 個問題。此外，在撰寫文章時，它在 Github 上擁有超過 215,929 顆星的關注。
然而，React 社區的這種龐大數量也帶來了碎片化的問題，使得獲取關于常見問題的反饋變得相對復雜。
相比之下，Vue.js 以其輕量級和漸進式特性著稱，便于快速開發 Web 應用程序。對于新手開發者而言，Vue.js 的學習曲線更為平緩，所需時間也更少。
說到Vue.js受歡迎程度，#vue.js 年內 StackOverflow 上大約有 106,251 個問題，Github上有超過205884個星的關注。
最后，比較 Vue.js 和 React 的最后一個標準是包下載的數量。
在啟動Web項目時，選擇適合的JavaScript框架或庫至關重要。Vue和React均適用于構建任何網站或Web應用程序。然而，開發速度和成本成為關鍵考量因素。
開發速度
我們的經驗表明，Vue.js 和 React 的開發速度相似。不過，值得注意的是，還有許多其他庫、框架和工具包能夠加速應用程序的構建過程。開發人員的編碼經驗和技能會影響他們對Vue或React的偏好，但實際上，在類似任務上的時間估計通常是相似的。
成本
成本受多種因素影響，包括開發人員的經驗、資歷、地理位置等，因此可能會有顯著差異。為了提供一些參考數據，我們可以參考Codementor等平臺提供的VueJS與React的平均開發成本。
React 開發人員的平均費率：
Vue 開發者的平均費率：
因此，React 開發者的費率略高于 Vue 開發者的費率，這影響了項目成本。
React
對于 React，開發人員使用一個名為 Create React App 的官方工具。它可以幫助開發人員加速用戶界面開發、添加腳本和安裝必要的依賴項等工作。
在Create React App問世之前，開發人員需從舊項目中復制Webpack配置及其他配置文件，以手動配置新Web應用，這一過程耗時且乏味。
Create React App通過提供一個CLI接口，自動構建具有基本結構的應用，安裝所有必需依賴項，并配置package.json以運行、測試和構建應用，從而解決了這一問題。此外，React還獲得了主流IDE的廣泛支持。
Vue
舊版本的 Vue.js 框架建議使用 Vue-CLI，這是一個用于快速創建項目的工具。此類項目具有現成的結構、已安裝的配置以及許多基本文件。
然而，隨著Vite的興起，它已成為創建新Vue應用的推薦選擇，相較于基于Webpack的Vue-CLI，Vite在保持其優勢的同時，提供了更快的開發速度。使用create-vue腳手架工具可以輕松地初始化Vite項目。因此，Vue-CLI可保留用于維護舊應用，而Vite則成為新Vue應用的默認選擇。
React
React以UI為核心，專注于構建UI組件，其XML風格的語法便于創建包含視圖描述的UI組件。
然而，React本身不提供狀態管理功能。對于小型應用，開發者可以利用React內置的Context API來管理狀態，但對于更復雜的Web應用，則需要借助第三方庫。Redux、MobX、Recoil和Zustand等是流行的狀態管理庫，其中Redux基于Flux架構模式，備受推崇。此外，React Router也是由第三方提供的，并非官方包。
Vue
Vue.js作為一個動態框架，允許開發者使用其基本工具輕松創建應用。但是，如有必要，它還提供您可能需要的絕大多數功能：
綜上所述，Vue在靈活性方面表現優異，無論是小型還是大型應用，都提供了直觀且強大的解決方案。相比之下，React則需要開發者根據需要選擇和使用第三方庫來擴展功能。
React
React在移動應用程序開發領域以React Native框架嶄露頭角。React Native是一個利用JavaScript構建跨平臺iOS和Android應用的工具，自2015年初問世以來，便基于React不斷演進。該框架摒棄了WebView和HTML技術，轉而采用原生組件與JS的綁定，并將其封裝在React中。
盡管iOS對React Native的支持略勝一籌，但Android的支持也在不斷進步，為開發者提供了高質量的跨平臺應用開發服務。
此外，React在漸進式Web應用程序（PWA）開發方面也展現出了巨大潛力。自2015年起，PWA便憑借其接近原生應用性能的Web技術（CSS、HTML和JavaScript）構建方式而備受矚目。
全球眾多知名企業，如阿里巴巴、Twitter等，已廣泛采用PWA技術，以優化用戶的移動體驗。在我們的實踐中，我們也成功為多個領域，包括保險、招聘和電子商務市場開發等，交付了多個PWA項目。
以下是使用 React 和 Ruby on Rails 構建的活動預訂平臺的漸進式 Web 應用程序示例：
事實上，Codica 團隊提供的許多產品都是 PWA。這不僅節省了最小可行產品開發服務的時間和成本，而且還提供了快速且針對搜索引擎優化的解決方案。
Vue
另一方面，Vue.js 與 NativeScript （NS） 配對，后者允許您使用 XML、CSS 和 JavaScript 構建跨平臺應用程序。NativeScript 解決了與上面提到的 React Native 相同的問題，但它們有一些不同。
為了比較 Vue.js 與 React 的受歡迎程度和開發人員社區的使用情況，讓我們看一下 Google 趨勢圖表。它顯示過去 12 個月的數據。
總而言之，開發人員對 React Native 表現出更高的興趣。這可以歸因于與 NativeScript 相比，它的性能更好。關于這一優點，我們還提供 React Native 應用程序開發服務，為用戶提供更好的移動體驗。
在組件開發方面，Vue.js和React都遵循了相似的組件化方法，但兩者在實踐細節上存在一些差異。
React
React在一定程度上顛覆了傳統的最佳實踐。長期以來，開發人員一直努力將模板與嵌入式JavaScript邏輯分離，但在React的JSX中，這兩者卻緊密融合。盡管這聽起來可能有些顛覆性，但Peter Hunt在“React：重新思考最佳實踐”的演講中對此進行了深入闡述。
他指出，模式與邏輯的分離更多是一種技術分工，而非責任分工。在React中，我們創建的是組件而非模板，這些組件具有可重用性、可集成性和便于單元測試的特點。雖然該視頻是 10 年前上傳的，但其中強調的原則在今天仍然適用。
此外，您還可以將組件嵌套在其他組件中。因此，您將使用簡單的構建塊創建復雜的用戶界面。
JSX作為React的一個可選預處理器，提供了類似HTML的語法，并編譯成JavaScript。然而，由于class是JavaScript中的保留關鍵字，因此在JSX中需要使用className替代。
盡管JSX在某些方面可能顯得有些奇特，但它為開發帶來了顯著優勢。通過將所有內容集中在一個位置，開發過程更加高效，同時編譯階段的自動完成和檢查功能也得以更快運行。當在JSX中發生錯誤時，React會拒絕編譯代碼，并顯示出錯行號，從而幫助開發人員快速定位問題。
Vue
Vue框架引入了“單文件組件”的概念，這是一種在職責劃分上的巧妙設計。在這種組件中，模板、腳本和樣式被有序地分離到三個不同的部分中，而不是混雜在一個文件中。這樣的設計帶來了諸多好處，如語法高亮、CSS支持，以及輕松集成如Jade或SCSS等預處理器的能力。
各種來源都指出 JSX 更容易調試，因為 Vue 不會在 HTML 中顯示語法錯誤。然而事實并非如此，因為 Vue.js 將 HTML 轉換為 render 函數，因此，錯誤顯示沒有問題。
Vue 組件結構：
React 組件結構：
性能是開發人員創建提供最佳用戶體驗應用程序的關鍵因素。為了評估Vue.js與React在性能方面的表現，我們參考了一個出色的工具——js-framework-benchmark，該工具能夠對比兩個框架的性能指標。
持續時間（以毫秒為單位）± 95% 置信區間。
| React 和 Vue 性能比較 | ||
| 名字 |  反應（毫秒） |  Vue.js（毫秒） |
| 創建行加載頁面后創建 1000 行的持續時間 | 49,7 ± 0.5 | 46.0 ± 0.4 |
| 替換所有行更新表的所有 1000 行的持續時間（5 次預熱迭代） | 50.5 ± 0.5 | 47,3 ± 0.6 |
| 部分更新是時候更新具有 10k 行的表的每 10 行的文本（5 次預熱迭代）了 | 26.0 ± 0.5 | 25.0 ± 0 |
| 選擇行Duration （持續時間） ，用于響應對行的單擊以響應該行（具有 5 次預熱迭代） | 6.6 ± 0.2 | 4.6 ± 0.2 |
| 交換行在 1K 表上交換 2 行的時間（有 5 次預熱迭代） | 163.0 ± 1.3 | 26.0 ± 0.4 |
| 刪除行刪除行的持續時間（包含 5 次預熱迭代） | 21.5 ± 0.7 | 21.8 ± 0.6 |
| 創建多行創建 10,000 行的持續時間 | 640.1 ± 2.9 | 470.5 ± 2.1 |
| 將行追加到大型表在 10,000 行的表上添加 1000 行的持續時間 | 51,8 ± 0 | 47,9 ± 0.7 |
| 清除行清除填充了 10.000 行的表的持續時間 | 17.1 ± 0.3 | 16.4 ± 0.4 |
| 啟動時間加載、解析和啟動的時間 | 2,551.8 ± 0.0 | 2,101.7 ± 0.0 |
綜上所述，React在性能方面表現出色，但與Vue的差距并不大，這一點在與特別慢或特別快的開發工具（如Inferno）相比時尤為明顯。
在狀態管理方面，React和Vue這兩種Web開發工具雖然方法相似，但在不變性等方面仍存在一定差異。隨著應用程序的復雜度和規模的增長，有效管理狀態變得尤為關鍵。
狀態管理的基本原理在于，組件描述了特定時間點的UI狀態。當數據發生變化時，框架會重新渲染UI組件，確保顯示的數據始終保持最新。這一理念可以概括為“UI即函數”。
具體來說，應用程序的狀態被統一存儲在一個對象樹中，這不僅有助于調試，還使得某些功能更容易實現。該狀態被設計為只讀，只能通過特定的操作來修改，從而避免了潛在的爭用條件。為了定義狀態如何根據操作進行轉換，我們需要創建Reducer。
在Codica項目中，我們傾向于使用React來打造用戶界面，這主要得益于其顯著的優勢。React的靈活性和健壯性為我們提供了構建高性能、卓越用戶體驗應用程序的堅實基礎。
在啟動域名銷售網站時，我們面臨優化和增強現有平臺界面的挑戰。因此，我們選擇了React作為解決方案，以確保Web應用程序的高性能和SEO友好性。這一選擇使React成為我們市場前端部分的首選庫。
通過采用React，我們成功提升了平臺的速度和性能。為了改進搜索功能，我們添加了過濾器，這些過濾器能夠按行業顯示域名，并將其分類為rented、sold和deleted。
此外，我們還實現了工具欄功能，允許用戶批量更改域名列表，只需一個彈出窗口即可輕松調整數千個域名。
最近，我們還使用React構建了一個房地產SaaS應用程序，該網站功能復雜，包括3D游覽功能，能夠全方位展示房產。
得益于Jamstack方法，結合Gatsby和React技術，盡管處理大量數據，該解決方案仍能保持快速運行。我們遵循最佳開發實踐，確保了前端和后端都能提供出色的用戶體驗。
該平臺功能豐富，連接房主、租戶和代理人。我們設計了一個便捷的菜單，方便用戶添加關于房產的關鍵信息。如果需要，租戶或代理人可以通過直觀的表格與房主進行高效溝通。
React和Vue作為兩大前端框架，既有共同之處，也存在顯著差異。以下是對這兩種技術的綜合比較。
React
對于需要構建復雜Web應用程序的場景，如露營者在線市場，React是一個理想的選擇。它是創建用戶界面的強大工具，我們利用它來提供定制軟件和SaaS開發服務。
React擁有龐大的社區支持，這使得未來的維護和定制變得更加容易。大量的貢獻者和開發人員隨時準備為各種應用程序的構建貢獻力量，其總量超過了Vue。
此外，React還提供了豐富的庫和工具，能夠簡化和加速開發過程。當現成的解決方案可用時，我們無需從頭開始編寫函數，從而提高了開發效率。
Vue
如果您對創建輕量級且易于維護的Web應用程序感興趣，Vue.js則是一個不錯的選擇。它的學習曲線較低，允許新開發人員在短時間內掌握框架并開始應用程序開發。
雖然Vue的社區規模目前小于React，但它正在以驚人的速度增長。隨著社區貢獻量的增加，可用的工具和庫的數量也將隨之增多，為Vue的未來發展提供了有力支持。
為了總結所有的優缺點，讓我們看一下 Vue 與 React 的比較表。
| React 和 Vue：總結 | ||
| 標準 | React | Vue.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 開發。但是，在選擇要采用的內容時，您需要牢記表格中顯示的差異以做出正確的選擇。
這兩種Web開發工具均能滿足多樣化的需求和要求。無論是構建Web應用程序、單頁應用程序，還是開發用戶界面組件，它們都能提供有力支持。
盡管理論上可以在一個應用程序中同時采用React和Vue組件，但在特定情境下，選擇其中一種技術可能更為合適。
以下是考慮選擇 React 或 Vue.js 的不同因素的比較表：
綜上所述，Vue和React均已成為構建復雜Web應用程序不可或缺的強大工具，并在各自的發展道路上取得了較大的進步。兩者不斷推出的新版本均帶來了諸多改進，為開發人員提供了更高效的工作方式和更出色的用戶體驗。
在Codica，我們既是React也是Vue.js技術的堅定支持者，并借助這兩種技術為客戶打造了眾多定制化的解決方案。例如，我們為面包店業務開發了SaaS平臺，并利用這些技術在保險軟件開發等特定領域構建了專業的解決方案。
React是一個用于構建用戶界面的JavaScript庫。我們可以在React專用網站的主頁上看到這個定義。該工具由前Facebook軟件工程師Jordan Walke創建，目前仍由這家互聯網巨頭維護。
在行業支持方面，React可以擁有更廣泛的應用領域。它用于不同類型的Web應用程序，從項目管理軟件和SaaS產品到B2B市場。反過來，Vue逐漸成為數字設計和數字藝術領域的佼佼者。
Vue與React在向文檔對象模型（即HTML和XML文檔的API）渲染內容方面存在差異。React庫僅使用JSX，這一擴展使得開發者能夠將HTML直接嵌入到JS代碼中。而Vue除了可以使用JSX外，還采用HTML模板。
實際上，React和Vue都是前端開發的好選擇。這些技術是在同一時間創建的，并由開發人員和社區成員不斷改進。它們都表現出出色的性能，現在用于構建流行的Web應用程序。
事實上，Vue比React更適合構建復雜的Web應用程序。首先，它的生態系統是由Vue開發人員編寫和支持的，而不是社區。此外，一個成熟的項目的所有功能都是開箱即用的，只有很少的功能需要從頭開始構建。
與Vue相比，React具有直觀的特性，并帶有易于使用的組件。此外，React有廣泛的社區和庫可供使用。
MUI（原Material UI）是React的最佳選擇。它有許多組件和模板，您可以簡化以滿足您的需求。此外，Chakra UI和Ant Design最好與React一起使用。
Vue.js提供了多功能的庫和全面的工具來創建單頁應用程序（SPA）。它具有適用于小型應用程序的必要工具和模板。
這兩種技術都使用虛擬DOM并具有基于組件的體系結構。他們有全面的圖書館和工具。React和Vue都得到了大型社區的支持。
Vue是管理儀表板的最佳框架。它提供了現成的管理儀表板，如Vue Notus，Vuetify，Muse Vue Ant儀表板，Vue Material儀表板等。
冪簡集成是國內領先的API集成管理平臺，專注于為開發者提供全面、高效、易用的API集成解決方案。冪簡API平臺可以通過以下兩種方式找到所需API：通過關鍵詞搜索API、或者從API Hub分類頁進入尋找。
原文鏈接：https://www.codica.com/blog/react-vs-vue/
