React 中的建置過程（或任何與此相關的框架中的建置過程是什麼？）

[技術]：ReactJS – 文章#1

---

框架簡化了工程師的開發，這是我嘗試簡化 ReactJS 的幕後功能。

---

故事時間

我開始使用 ReactJS。是的，我確實有。這就像一個夢想，推遲了兩年，當時我對 UI / UX 設計和前端開發充滿熱情，然後才開始進入數據科學。 （我仍然像兩年前一樣熱情。）

我現在是一家公司的實習生（這家公司稱自己為新創公司，因為它的文化更像是新創公司的文化，而不是公司的文化），今天，在我上班的第一天，我實際上無所事事，因為，我的TL（團隊負責人）沒有來辦公室，因為他正忙著開會。

我是否讓時間從我手中溜走了？絕對不是。
我獲得任務/專案來測試我的資料分析技能的可能性相當低。因此我開始親自動手開發。我感覺到這可能是開始使用 ReactJS 的最佳時機。

---

什麼是反應？

React 是一個動詞（雙關語）。但在開發技術方面，「Web 和本機使用者介面庫」，聲稱是 ReactJS 官方網站。

現在，如果您熟悉開發生態系統，您一定聽說過其他兩個競爭對手，或者更確切地說是 ReactJS 的兄弟姐妹，它們是 Angular 和 VueJS。

以下是 3 種最受歡迎的前端技術的簡短比較。

Core Concept	Library focused on UI	Full-fledged framework	Progressive framework
Data Binding	One-way data flow	Two-way data binding	Two-way data binding (optional)
Component Structure	Custom components	Directives and components	Components
Learning Curve	Moderate	Steep	Gentle
Performance	High (Virtual DOM)	Can be slower due to two-way data binding	High (Optimized rendering)
Scalability	Excellent, suitable for large-scale apps	Strong support for large-scale enterprise apps	Good scalability, but might require additional libraries for complex projects
Community and Ecosystem	Largest community, rich ecosystem	Large community, strong ecosystem	Growing community, good ecosystem
Flexibility	High, can be used with other libraries/frameworks	Less flexible due to rigid structure	Flexible, can be used incrementally

核心理念 專注於 UI 的函式庫 成熟的框架 漸進式框架 標題> 資料綁定 單向資料流 雙向資料綁定 雙向資料綁定（可選） 組件結構 自訂組件 指令和組件 組件 學習曲線 中 陡峭 溫柔 性能 高（虛擬 DOM） 由於雙向資料綁定，速度可能會較慢 高（優化渲染） 可擴展性 優秀，適合大型應用 對大型企業應用的強大支援 良好的可擴展性，但對於複雜的專案可能需要額外的庫 社區與生態系 最大的社區，豐富的生態系 龐大的社區，強大的生態系統 不斷發展的社區，良好的生態系統 靈活性 高，可以與其他庫/框架一起使用 由於剛性結構而缺乏彈性 靈活，可以增量使用 表>

---

當我們有純 HTML 和 JS 時，為什麼還要使用 ReactJS？

純 HTML 和 JS 的缺點。

以下是您使用時會遇到的問題：

維持大型應用程式的困難：

• 純 HTML 和 JS 缺乏組織程式碼的結構化方法。

• 複雜的應用程式可能會導致事件偵聽器和腳本檔案中邏輯和 UI 操作錯綜複雜。

• 隨著應用程式的成長，理解、修改和偵錯程式碼變得困難。

低效率的 DOM 操作：

• 直接在 JS 操作 DOM 效率很低。

• 每次狀態變更都可能觸發 HTML 結構的完全重新渲染，即使是較小的 UI 更新也是如此。

• 隨著應用程式複雜性的增加，這可能會導致效能瓶頸。

可重複使用性有限：

• 使用純 HTML 和 JS 建立可重複使用的 UI 元件可能很麻煩。

• 您最終可能會在應用程式的不同部分複製和貼上程式碼片段。

• 這使得保持一致性和高效實施變更變得困難。

複雜的狀態管理：

• 使用純 HTML 和 JS 來管理應用程式的狀態（控制 UI 行為的資料）變得很困難。

• 追蹤資料變更及其對應的 UI 更新可能會變得混亂且容易出錯，尤其是對於複雜的資料流。

---

ReactJS 如何來救援。

ReactJS 透過提供基於元件的架構、用於高效更新的虛擬 DOM 以及用於管理複雜 UI 和應用程式狀態的豐富生態系統來解決這些限制。

提高可維護性：

• React 基於元件的架構和聲明式方法可以帶來更乾淨、更易於維護的程式碼庫，特別是對於大型應用程式。

增強性能：

• React 中的虛擬 DOM 和高效渲染機制有助於實現更流暢、更快的使用者體驗，即使對於複雜的 Web 應用程式也是如此。

程式碼可重複使用性：

• React 的元件模型提高了程式碼的可重複使用性，讓您可以建立可以在應用程式中輕鬆共享和組合的模組化 UI 元件。

---

差異帶來差異。

當我創建第一個元件時，我問自己，「這到底是什麼」？是 HTML 還是 JS？

我已經透過 <script> 將 JS 嵌入到 HTML 中</腳本>元素或 <script src="index.js"> </腳本>元素。但是在 JS 檔案中編寫 HTML 感覺很奇怪或相當不同。 </script>

我嘗試在非 React 專案的 JS 檔案中編寫 HTML，猜猜結果不太順利。

然後我了解到這種特殊語法（類似於 JS 檔案內部的 HTML）被稱為 JSX JavaScript XML，並且是 JavaScript 的擴充功能。

如果瀏覽器理解的程式碼最終是純HTML和JS，則表示在我們編寫的JSX（輕鬆建立複雜應用程式的語法糖）上執行了一些操作。

這種幕後操作本身稱為建造過程。

建置流程的高階想法是將您的開發程式碼轉換為可在生產環境中部署的最佳化版本。

雖然特定的工具和配置可能會因技術堆疊而異，但建置過程的一般概念和目標普遍適用於前端 Web 開發。

---

ReactJS 中的建置流程是什麼？

我們了解到，高階思想保持不變，但 React 建置過程的幾個階段如下：

1. 捆綁：
   • 想像一下您的 React 應用程式由大量 JavaScript 檔案、CSS 樣式表和潛在的圖像資源組成。

像 Webpack 這樣的打包器會取得所有這些單獨的文件，並將它們組合成數量較少的最佳化套件。

1. 翻譯：

   • 轉譯涉及將這種現代程式碼 (JSX) 轉換為可以在更廣泛的瀏覽器上運行的純 JavaScript（ES5 或相容版本）。

2. 縮小：

   • 縮小透過刪除空格、註解和長變數/函數名稱等不必要的字元來縮小捆綁程式碼的檔案大小。

3. 最佳化：

   • 建置過程可能涉及額外的最佳化，例如 tree-shaking，它會從最終套件中刪除未使用的程式碼。

4. 生產模式：

   • 開發模式提供來源映射（以便於偵錯）和詳細錯誤訊息等功能。

相較之下，生產模式著重於透過啟用縮小、tree-shaking 和其他效能增強來進行最佳化。

---

React-scripts：React 專案之狼

react-scripts 是 Create React App (CRA) 使用的內部包，用於處理 React 專案中的幕後功能。

大多數時候開發者不會直接與之交互，但它對於開發效率至關重要。

這是react-scripts 的職責：

• 捆綁與轉譯
• 開發伺服器與熱重載
• 測試
• 生產建築

react-scripts 執行的 3 個最重要的任務如下，我們將詳細了解：

1. 捆綁：

   • 想像一下您的 React 應用程式由大量 JavaScript 檔案、CSS 樣式表和潛在的圖像資源組成。
   • 像 Webpack 這樣的打包器會取得所有這些單獨的文件，並將它們組合成數量較少的最佳化套件。
   • 這減少了瀏覽器需要發出的 HTTP 請求數量，提高了網站載入速度。

2. 翻譯：

   • 舊版瀏覽器可能無法理解現代 JavaScript 功能，例如 React 中使用的 JSX 語法。
   • 轉譯涉及將這些現代程式碼轉換為可以在更廣泛的瀏覽器上運行的純 JavaScript（ES5 或相容版本）。
   • 像 Babel 這樣的工具通常用於 React 中的轉譯。

3. 縮小：

   • 縮小，也稱為最小化，是一種應用於程式碼以減少其檔案大小而不影響其功能的技術。
   • 這對於部署到生產環境的 React 應用程式特別有利，因為較小的檔案大小可以轉換為更快的網頁載入時間。

縮小的工作原理如下：

1. 刪除不需要的字元：

   • 縮小器消除了程式碼中的空白字符，例如空格、換行符和製表符。這對於小檔案來說似乎微不足道，但在大型 React 專案中，它可以導致大小顯著減少。

2. 縮短變數和函數名稱：

   • 縮小器通常用更短的單字母名稱取代描述性變數和函數名稱。雖然這使得程式碼對人類來說可讀性較差，但它顯著減小了檔案大小。

3. 刪除註解：

   • 註解對於開發過程中記錄和理解程式碼至關重要。但是，在生產中，程式碼運行並不需要它們。壓縮器通常會刪除註解以進一步最小化檔案大小。

---

結論

這是僅1天的學習總結。

如果我使用 GenAI 工具，我將能夠建立比這更多的東西。我以任何方式使用 GenAI 工具，但都是為了學習目的。

我相信提出這組正確的問題，然後真正深入地理解這些概念將使您與自動化開發人員區分開來。

在面試中，我們尋求的是對概念的理解和清晰度，而不是你的編碼速度，因為無論哪種方式，它都會在一定程度上實現自動化。

因此，成為優秀軟體工程師的唯一 X 因素在於您的知識，至少能夠驗證和驗證 GenAI 模型的結果是否滿足您的技術需求。

如果您認為我的內容有價值或有任何回饋，
請聯絡我的以下社交媒體帳號，您可以在我的個人資料中找到這些帳號以及以下內容：

領英：https://www.linkedin.com/in/shrinivasv73/

推特 (X)：https://twitter.com/shrinivasv73

Instagram：https://www.instagram.com/shrinivasv73/

電子郵件：shrinivasv73@gmail.com

？我是 Shrinivas，結束了！

---

以上是React 中的建置過程（或任何與此相關的框架中的建置過程是什麼？）的詳細內容。更多資訊請關注PHP中文網其他相關文章！