在2023年學習React並不是一件容易的事情。自2019年React Hooks釋出以來，我們已經擁有了很多穩定性，但現在形勢正在再次變化。而這次變化可能比使用React Hooks時更加不穩定。在本文中，我想比較兩種學習React的方式：以庫的方式和以框架的方式。
為了讓事情更加清晰：React釋出了新的檔案，並建議將React用於完全整合的框架中。檔案主張使用一個（元）框架（例如Next.js），而不是將React作為庫（或框架 ）在像Vite或Parcel這樣的打包工具中使用。我對此的看法是，在框架最終成為預設選項之前，仍然建議使用其他React啟動工具，而不僅僅是完全整合的React框架，以使轉變更加容易。
技術是個圈
誰不知道這個技術短語是來自嘲笑即將到來的不可避免變化的高階開發？沒錯，我們創造，學習，適應。一直以來都是這樣，這是反饋迴圈的本質。
開發者也對Web開發的當前狀態發表了類似的看法：在大約2000年到2010年，我們在PHP、Java、C#中，將Web應用程式實現為伺服器端應用程式（SSR - 服務端渲染/服務端路由），接著是Ruby on Rails。他們將越來越多的JavaScript（例如jQuery、MooTools、Dojo）混合在一起，以改善客戶端的使用者體驗。
在2010年，形勢轉向了以客戶端為主的應用程式（CSR - 客戶端渲染/客戶端路由），這是在單頁應用程式（SPA）這個總稱下的完整JavaScript解決方案。
- 第一代：Backbone，Knockout，Ember，Angular
- 第二代：React，Vue
- 二點五代：Svelte
- 第三代：Solid，Qwik
如今，許多人將SPA稱為Web開發歷史上的錯誤。
然而，SPA有其存在的意義，而且SPA成為JavaScript（以及後來的TypeScript）作為Web應用框架起飛的條件，並得出將JavaScript/TypeScript用於SSR的結論，因為底層技術的缺失（例如缺少HTTP流）使我們以前（到目前為止）無法實現它。
服務端的React
總之，這種作為SPA的web應用程式的狀態大約持續了10年…
現在圓圈已經閉合了，因為我們正在回到使用React和許多其他框架的SSR；每個框架（Vue、Svelte、Solid、Qwik、Angular）都相互影響著。
雖然許多非原生JavaScript開發人員嘲笑這種轉變是“回到了過去”（參見2000-2010年），或者是“JavaScript在模仿PHP”，但是他們忽略了與上一個週期相比的所有改進（例如部分/選擇性水合、服務端元件作為架構模式、可恢復性）。
JavaScript（更好的說法是TypeScript）是SSR Web應用程式的一等公民。
它將是下一個十年我們實現Web應用程式的方式...
...在人工智慧接管之前（開個玩笑）。
扯遠了，我們來談談React以及如何在這些動盪的水域中學習它。
學習作為庫的React
從釋出以來，React已經作為一個庫使用了將近十年。React開發人員一直在使用React與豐富的生態系統中的許多其他互補庫一起使用。React Router就是其中一個受歡迎的庫，因為它為React在SPA世界中啟用了客戶端路由。
大部分React的學習材料都將其作為一個庫來教授。新的React檔案這樣做，最流行的React書籍《The Road to React》也是如此，還有許多其他線上教程、影片和課程。
學習React作為一個庫時，你不會被框架分心。你可以完全專注於學習React的基礎知識：元素 vs 元件，React Hooks，自定義Hooks，函式元件，事件處理器，表單，Refs，條件渲染，Props，然後再整合諸如React 測試庫或樣式元件（或任何其他React樣式解決方案）等互補的第三方庫。
通常你會使用類似Vite的打包工具來學習React。當打包工具在背後消失時，你將學習如何使用React建立客戶端路由/渲染的SPA。
如今，許多React初學者對學習React作為一個庫感到不確定，因為當前的說法告訴我們應該學習框架。雖然我同意未來的趨勢是完全整合的框架，但是專注於學習React的基礎知識並不會使你學到錯誤的東西。
初學者也不會錯過SSR，因為仍然有許多應用程式在沒有框架的情況下執行。儘管SSR將在未來成為主流，但現在還沒有到達那一步，你將很幸運地掌握如何使用遠端REST / GraphQL / tRPC API，來建立客戶端應用程式的歷史知識。這將是你技術棧中的一項基本技能（特別是與API一起工作）。
學習作為框架的React
未來，React將作為一個提供框架所需基本構建塊的庫而展現。雖然開發人員過去一直能夠自己使用React的功能，但隨著React作為一個框架走向未來，這種情況將不再存在。
例如，React服務端元件會與路由和資料獲取密切整合。雖然框架將根據React本身提供的明確定義的規範實現這個架構構建塊，但日常的React開發人員只會將它們作為框架提供的功能來使用，因為他們不需要自己根據規範來實現它們。
這樣做有充分的理由，因為我們希望框架處理細節，而React開發人員可以專注於實現其業務邏輯。
在學習React作為框架時，最好的選擇是學習Next.js。它具有基於檔案的路由，許多渲染技術（CSR、SSG、ISR、SSR），其中SSR是一等公民，內建影像、SEO和字型支援。它也儘可能接近於在框架中使用React，因為它與React在諸如React服務端元件等功能上密切合作。此外，許多React核心開發人員現在正在為Vercel工作，Vercel是Next.js背後的公司。
建議
學習React作為庫或框架不必是一個排他性的決定。以下是我給React初學者的建議：
在學習React作為框架的同時，不要忽略它作為庫的基礎知識。例如，你可以從框架開始學習React。最有可能的是，你會首先使用像Next這樣的框架實現頁面之間的路由轉換。這個特性完全由框架提供，而不是React本身。但是，一旦你接觸到React的基礎知識，比如Hooks，回到React作為庫的基礎知識總是一個好的動力。
2023年學習React的一種方法：在實現一個你感興趣的領域的應用程式（例如體育、動漫、遊戲、電子商務、生產力、音樂）時，同時使用React和Next的檔案。
你可以從Next的檔案開始。但是每當你接觸到React的基礎知識時，回到React的檔案中。重點關注兩個實體（框架和庫）的交匯處以及它們提供給你的工具。
如果你想透過補充學習資源來學習React的基礎知識，請檢視課程、影片或書籍。這些資源可能會為React作為庫及其基礎知識提供不同的視角。
以上就是本文的全部內容，如果對你有所幫助，歡迎點贊、收藏、轉發~