date: 2021/7/26
⚛️ React - 組件 與 模組
模組
- 什麼是模組? 向外提供特定功能的 JS 程序，一般就是一個 JS 文件。
- 為什麼要拆成模組呢? 隨著業務邏輯增加，代碼越來越多且複雜。
- 最終結果是更能重複利用 JS，簡化 JS 編寫，提高 JS 的效率。
模組化
當應用程式的 JS 都以模組來編寫，就是一個模組化的應用程式
組件
- 什麼是組件? 用來實現局部功能效果的代碼和資源的集合體（HTML / CSS / JS / Image）。
- 為什麼拆成組件呢? 一個頁面的功能更複雜。
- 最終結果是重複利用代碼，簡化項目編寫，提高運行效率。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
此為 React 官網作為範例
React 官網一看，大致上可以拆成三個組件（Header / Content / Menu），甚至還可以拆得更細。
組件化
當應用程式是以多組件的方式完成，就是一個組件化的應用程式
React 開發人員工具
在正式開發組件之前，要先下載 React 開發人員工具
- 打開 Chrome 線上應用程式商店
- 搜尋 React Developer Tools 並下載。
- 點擊瀏覽器右上方的
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
把開發者工具釘選上去
- 開發者工具會有三種顏色呈現方式
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
灰色，表示當前網頁不是用 React 開發的
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
紅色，表示當前網頁還處於開發者模式，未打包上線
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
藍色，表示當前網頁已打包上線
- 按 F12 開發者工具內會新增兩個選項
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- Components 用來觀察網頁內有多少個組件組成的。
- Profiler 用來記錄網站的性能。
參考資料
HackMD
