React

React Class Component 至 Function Component with Hook API 的生命週期寫法的轉換整理

主要整理 React 16.3 以後的 Lifecycle ，因此將被棄用的就不再討論了。而官方也推薦使用 Hook API 來作為開發新的頁面使用，但不建議去重寫原來的 Class Component，新的 Hook API 可能會使你原本對 React 的認知一整個翻新，但對於 React 未來的 Roadmap 而言，學習 Hook API 是勢在必行。

設計一個 React Hook 達到選項惰性載入以及顯示數控制的效果

選擇一個選項讓使用者選取，幾乎是每個網站都會遇到的需求，但開發要讓使用者選取項目時，可能會遇到兩種狀況：

1. 選項屬於非同步資料，資料過多抓取時，耗時會…

TypeScript Conditional Types 應用實例

TypeScript 提供了有趣的 Conditional Types，能夠條件式的賦予 interface 欄位值的類型。本篇文章會從簡易的應用開始介紹，最終會實現以 interface…

適用於後台系統的 UI Library - Ant Design v.s. Blueprint

基於瀏覽器的功能日漸強大與各種函式庫的支援，以網頁建立公司各種後台管理系統已經是非常常見的事。相較於前台是給…

Ant Design 3.8.4 之後版本 @ant-design/icons 的 Bundle 大小暴增的解決方法

使用 BlueprintJS + React Hook API + Typescript 打造後台系統高效能 Table元件

前言

React Function Component Pattern 2：用 useRef / useEffect / useCallback 封裝 callback 函數

Pure Component 是 React 中常見提升效能的方式，如果傳遞 props 給 Pure Component 時有用到 propA={{…props.A}} 或 onChange={(e) => {...}}，那有用 Pure Component 跟沒用一樣，因為每次 render 都還是會產生新的物件或函數，所以…

React Function Component Pattern 1：用 Factory 封裝靜態變數

會重複使用的元件，其中有些 props 在開發時期就能決定，且在執行時期也都不會變更。舉例：開發一個共用的 Form 元件給後台使用，Form 的標題會是固定的，或者要把 Form 的資料存到 localStorage 時用的 key 值也是固定且開發時期能決定。

規則與應用

1. 靜態 props 用 s 開頭