- ReactJS 教程
- ReactJS - 首頁
- ReactJS - 簡介
- ReactJS - 路線圖
- ReactJS - 安裝
- ReactJS - 特性
- ReactJS - 優點與缺點
- ReactJS - 架構
- ReactJS - 建立 React 應用
- ReactJS - JSX
- ReactJS - 元件
- ReactJS - 巢狀元件
- ReactJS - 使用新建立的元件
- ReactJS - 元件集合
- ReactJS - 樣式
- ReactJS - 屬性 (props)
- ReactJS - 使用屬性建立元件
- ReactJS - props 驗證
- ReactJS - 建構函式
- ReactJS - 元件生命週期
- ReactJS - 事件管理
- ReactJS - 建立一個事件感知元件
- ReactJS - 在 Expense Manager APP 中引入事件
- ReactJS - 狀態管理
- ReactJS - 狀態管理 API
- ReactJS - 無狀態元件
- ReactJS - 使用 React Hooks 進行狀態管理
- ReactJS - 使用 React Hooks 進行元件生命週期管理
- ReactJS - 佈局元件
- ReactJS - 分頁
- ReactJS - Material UI
- ReactJS - Http 客戶端程式設計
- ReactJS - 表單程式設計
- ReactJS - 受控元件
- ReactJS - 非受控元件
- ReactJS - Formik
- ReactJS - 條件渲染
- ReactJS - 列表
- ReactJS - 鍵 (Keys)
- ReactJS - 路由
- ReactJS - Redux
- ReactJS - 動畫
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - 表格
- ReactJS - 使用 Flux 管理狀態
- ReactJS - 測試
- ReactJS - CLI 命令
- ReactJS - 構建和部署
- ReactJS - 示例
- Hooks
- ReactJS - Hooks 簡介
- ReactJS - 使用 useState
- ReactJS - 使用 useEffect
- ReactJS - 使用 useContext
- ReactJS - 使用 useRef
- ReactJS - 使用 useReducer
- ReactJS - 使用 useCallback
- ReactJS - 使用 useMemo
- ReactJS - 自定義 Hooks
- ReactJS 高階
- ReactJS - 可訪問性
- ReactJS - 程式碼分割
- ReactJS - Context
- ReactJS - 錯誤邊界
- ReactJS - 轉發 Refs
- ReactJS - 片段 (Fragments)
- ReactJS - 高階元件
- ReactJS - 與其他庫整合
- ReactJS - 效能最佳化
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - 不使用 ES6 ECMAScript 的 React
- ReactJS - 不使用 JSX 的 React
- ReactJS - 調和 (Reconciliation)
- ReactJS - Refs 和 DOM
- ReactJS - 渲染 Props
- ReactJS - 靜態型別檢查
- ReactJS - Strict Mode
- ReactJS - Web Components
- 附加概念
- ReactJS - 日期選擇器
- ReactJS - Helmet
- ReactJS - 內聯樣式
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - 輪播圖
- ReactJS - 圖示
- ReactJS - 表單元件
- ReactJS - 參考 API
- ReactJS 有用資源
- ReactJS - 快速指南
- ReactJS - 有用資源
- ReactJS - 討論
ReactJS - 優點與缺點
React 是一個用於構建可組合使用者介面的庫。它鼓勵建立可重用的 UI 元件，這些元件呈現隨時間變化的資料。許多人使用 React 作為 MVC 中的 V。
React 為您抽象了 DOM，提供了更簡單的程式設計模型和更好的效能。React 還可以使用 Node 在伺服器端渲染，並且可以使用 React Native 驅動原生應用。React 實現單向反應式資料流，這減少了樣板程式碼，並且比傳統資料繫結更容易理解。
ReactJS 的優點
以下是 ReactJS 的主要優點：
效能
易於學習
大量的第三方元件
大型社群
SEO友好
輕鬆啟動 React 專案
豐富的開發者工具
處理大型應用
效能
React 使用虛擬 DOM (Virtual DOM) 概念來檢查和更新 HTML 文件。虛擬 DOM 是 React 建立的一個特殊的 DOM。虛擬 DOM 代表當前文件的真實 DOM。每當文件發生變化時，React 會將更新後的虛擬 DOM 與虛擬 DOM 的先前狀態進行比較，只更新實際/真實 DOM 中的不同部分。這提高了 HTML 文件渲染的效能。
例如，如果我們建立一個 React 元件來顯示當前時間，透過setInterval()方法定期更新時間，那麼 React 將只更新當前時間，而不是更新元件的全部內容。
易於學習
React 的核心概念可以在不到一天的時間內學會。React 可以使用純 JavaScript (ES6) 或 TypeScript 編寫。要開始使用 React，只需要掌握基本的 JavaScript 知識就足夠了。對於高階開發者，TypeScript 提供型別安全性和豐富的語言特性。開發者可以透過學習 JSX（類似於 HTML）和屬性 (props) 在幾小時內建立一個 React 元件。學習 React 狀態管理將使開發者能夠建立動態元件，這些元件在狀態發生變化時更新內容。React 為其元件提供了簡單的生命週期，可用於正確設定和銷燬元件。
大量的第三方元件
除了核心 React 庫（大小隻有幾 KB）之外，React 社群還為各種應用提供了大量的元件，從簡單的 UI 元件到功能齊全的 PDF 檢視器元件。React 在每個類別中都提供多種選擇。例如，高階狀態管理可以使用 Redux 或 MobX 庫來完成。Redux 和 MobX 只是兩種流行的狀態管理庫。React 有超過 10 個庫可以實現相同的功能。同樣，React 社群在路由、資料網格、日曆、表單程式設計等各個類別中都提供了許多第三方庫。
大型社群
React 開發者社群是一個龐大且活躍的社群。React 社群非常活躍，您可以透過 Google、Stack Overflow 等在幾分鐘內獲得任何與 React 相關的疑問的答案。
SEO 友好性
React 是少數幾個支援 SEO 功能的 JavaScript 庫之一。由於 React 元件和 JSX 類似於 HTML 元素，因此無需太多程式碼/設定即可輕鬆實現 SEO。
輕鬆啟動 React 專案
React 提供了一個 CLI 應用程式 create-react-app 來建立一個新的 React 應用程式。create-react-app 應用程式不僅可以建立一個新的應用程式，還可以構建並在本地環境中執行應用程式，而無需任何其他依賴項。create-react-app 允許開發者選擇一個模板，該模板允許應用程式在初始設定時包含更多樣板程式碼。這允許開發者在幾次點選中啟動小型應用程式到大型應用程式。
除了 create-react-app 之外，React 社群還提供其他工具，例如 Next.js、Gatsby 等，這些工具允許開發者在短時間內建立高階應用程式。
豐富的開發者工具
React 社群提供了必要的開發者工具來提高開發者的生產力。Chrome、Edge 和 Firefox 瀏覽器的React 開發者工具使開發者能夠選擇一個 React 元件並檢視元件的當前狀態。此外，它還使開發者能夠透過在瀏覽器的開發者選項卡中將其顯示為元件樹來清晰地瞭解元件層次結構。
處理大型應用
React 使用組合將多個元件合併為一個更大的元件，這反過來又允許建立更大的元件。React 元件可以在一個 JavaScript 檔案中建立，並可以設定為可匯出。此功能允許將多個元件作為模組分組到一個公共類別下，並可在其他地方重用。
React 庫的可組合性和模組化特性允許開發者建立大型應用程式，與其他前端框架相比，這些應用程式相對易於維護。
React 的缺點
即使 React 庫有很多優點，它也有一些缺點。一些缺點如下：
缺乏高質量的文件
沒有標準/推薦的應用程式開發方式
快速的發展速度
高階 JavaScript 使用
JavaScript 擴充套件
只是一個 UI 庫
缺乏高質量的文件
React 庫在其主要網站上提供了不錯的文件。它涵蓋了基本概念和一些示例。儘管這是一個瞭解 React 基本概念的好開始，但它並沒有提供帶有多個示例的深入和詳細的解釋。React 社群介入並提供了許多不同複雜性和質量的文章。但是，它們沒有在一個地方組織起來，開發者無法輕鬆學習。
沒有或很少有標準的應用程式開發方式
React 只是一個 UI 庫，只有幾個概念和標準建議。即使 React 可以用來建立大型/複雜的應用程式，也沒有標準或推薦的建立應用程式的方式。由於沒有標準的方式，React 社群使用多種架構來構建他們的應用程式。開發者可以自由地為他們的應用程式選擇一種方法。在應用程式開發之初做出錯誤的選擇會使應用程式複雜化，並延遲應用程式的開發。
快速的發展速度
React 每年都會發布幾次新版本的庫。每個版本都有一些附加功能和一些重大更改。開發者需要快速學習並應用新概念以穩定應用程式。
高階 JavaScript 使用
即使 React 庫的核心概念非常簡單易學，但高階概念卻相當複雜，因為它利用了 JavaScript 的高階特性。此外，React 有許多高階概念來解決 HTML/表單程式設計的許多複雜場景。大量的先進概念對開發者來說確實是一個很大的挑戰，需要學習和掌握。
JavaScript 擴充套件
JSX 是 JavaScript 語言的擴充套件。JSX 類似於 HTML，簡化了元件開發。JSX 與 HTML 程式設計也有一些區別，需要謹慎正確應用。此外，JSX 需要在瀏覽器中執行之前編譯成 JavaScript，這對應用程式來說是一個額外的步驟/負擔。
只是一個 UI 庫
正如我們前面學到的，React 只是一個 UI 庫，而不是一個框架。建立一個具有良好架構的 React 應用程式需要仔細選擇和應用額外的第三方 React 庫。糟糕的設計可能會在應用程式開發的後期/最終階段影響應用程式。