本系列文章將深入探討 React 與 TypeScript 的進階應用,並涵蓋現代 React 生態系中的多項核心技術。內容包括狀態管理(Server State 與 Client State)、React Server Components、渲染模式(Rendering Patterns)、Memorization 技術等。
前言 這個系列主要分享我在開發過程中所學到的一些技術和方法。同時,許多技術知識點其實是我之前接觸過的,但大多只是略懂皮毛,並沒有深入理解。藉由這次鐵人賽的契機,...
什麼是泛型? 首先先看一個簡單的例子 function identity<T>(arg: T): Type { return arg; } co...
在昨天只有介紹了 extends,還有其他好用的關鍵字。 typeof typeof 關鍵字可以用來取得一個變數或表達式的型別。 const user = {...
什麼是 Discriminated Unions 先看範例: type Shape = | { kind: "circle"; radi...
取得 HTML 元素的 props 在建立共用元件時,有時候會需要繼承到 HTML 元素的 props,這時候就需要針對原本的 props 做修改或擴充。但一個...
其他 TypeScript 語法技巧 以下是我有時會忘記,但實際上簡單且實用的小技巧。 Function Overloads 可以重複定義相同的函數,根據不同的...
為什麼需要使用 React Hook Form? 在沒有使用的表單管理套件的情況下,需要定義許多狀態來處理表單邏輯和各種錯誤狀況。而使用像 React Hook...
useRef 的使用時機 保存狀態:useRef 儲存的值不會因為元件重新渲染而改變,適合用來保存不需要觸發重新渲染的資料,像是表單輸入框的狀態、倒數計時器等...
React 的狀態類型 Client State:用戶端的狀態,包含各種和使用者狀態或互動相關的資料。 Server State:來自伺服器或 API 的...
Redux Toolkit 相關套件 必安裝套件: redux-toolkit : 簡化 Redux 的使用,讓開發者能更輕鬆地管理狀態和減少樣板程式碼,並且...