框架簡化了工程師的開發,這是我嘗試簡化 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 |
以下是您使用時會遇到的問題:
維持大型應用程式的困難:
純 HTML 和 JS 缺乏組織程式碼的結構化方法。
複雜的應用程式可能會導致事件偵聽器和腳本檔案中邏輯和 UI 操作錯綜複雜。
隨著應用程式的成長,理解、修改和偵錯程式碼變得困難。
低效率的 DOM 操作:
直接在 JS 操作 DOM 效率很低。
每次狀態變更都可能觸發 HTML 結構的完全重新渲染,即使是較小的 UI 更新也是如此。
隨著應用程式複雜性的增加,這可能會導致效能瓶頸。
可重複使用性有限:
使用純 HTML 和 JS 建立可重複使用的 UI 元件可能很麻煩。
您最終可能會在應用程式的不同部分複製和貼上程式碼片段。
這使得保持一致性和高效實施變更變得困難。
複雜的狀態管理:
使用純 HTML 和 JS 來管理應用程式的狀態(控制 UI 行為的資料)變得很困難。
追蹤資料變更及其對應的 UI 更新可能會變得混亂且容易出錯,尤其是對於複雜的資料流。
ReactJS 透過提供基於元件的架構、用於高效更新的虛擬 DOM 以及用於管理複雜 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 開發。
我們了解到,高階思想保持不變,但 React 建置過程的幾個階段如下:
像 Webpack 這樣的打包器會取得所有這些單獨的文件,並將它們組合成數量較少的最佳化套件。
翻譯:
縮小:
最佳化:
生產模式:
相較之下,生產模式著重於透過啟用縮小、tree-shaking 和其他效能增強來進行最佳化。
react-scripts 是 Create React App (CRA) 使用的內部包,用於處理 React 專案中的幕後功能。
大多數時候開發者不會直接與之交互,但它對於開發效率至關重要。
這是react-scripts 的職責:
react-scripts 執行的 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中文網其他相關文章!