useRef 是什麼？ useRef 是 React 提供的 hook，用來創建一個 可變（mutable）的引用對象，可以用來存取 DOM 元素或保存跨越多次...
今天，我們來為系統進行一些優化和安全性增強，對於打造一個穩定、高效、安全的系統是一定要做的。 1. 資料庫查詢優化 首先，我們來優化一些常用的資料庫查詢，以提高...
在現代的前端開發中，React 和 Redux 已經成為構建複雜應用的主流技術。然而，隨著應用的增大和複雜度的提升，調試和維護代碼變得愈加重要。為此，開發者需要...
終於來到了第30天的挑戰！這是我第一次參加鐵人賽，從決定參賽到正式開賽，心中經歷了許多掙扎，包括內容的配置和個人時間的安排。但如今順利完賽，我非常慶幸當初做出了...
useCallback的用途和使用時機 useCallback hook 最主要的作用在於幫助其他 React 效能優化的手段維持正常，例如：React.mem...
目標 前言 昨天再經過python後端API的CRUD開發之後高速的服務提供者Fast API 今天會介紹React的基本使用方式 不過我會講道說為什麼會使用...
React Compiler 是怎麼運作的? React Compiler 的運作流程很複雜，概括來說會執行以下幾個步驟： Babel Plugin： Ba...
今天，我們要來為系統新增兩個新功能：會員積分系統和課程預約功能，繼續擴充Gym Pro的系統功能完整性。 1. 會員積分系統 會員積分系統可以鼓勵會員更頻繁地使...
在 React 開發中，有時一些邏輯和功能會常常重複出現，若開發時沒有將程式碼做共用的話，就會到處都寫差不多像的內容，之後要做更改的話，就要同步作調整。這樣的寫...
鯨魚
‧
2024-10-10
Redux-Persist 是一個函式庫，它的主要功能是將 Redux store 中的狀態持久化到本地儲存（如瀏覽器的 localStorage 或sessi...
今天我們要來介紹三個非常實用的 TypeScript Utility Types，它們分別是 Exclude、Extract 以及 NonNullable。這些...
今天，我們要來為我們的系統加上重要的安全機制，並且優化整體的用戶體驗。 1. 實現身份驗證 首先，我們要實現一個完整的身份驗證機制。我們將使用 JWT（JSON...
useEffect hook 最主要的作用在於處理與畫面無關的 side effect，並非是 functional component 的生命週期API，因為...
React Memoization 和 React Compiler 在昨天的文章介紹了如何使用 React.memo , useMemo 和 useCallb...
在 React 中，當父組件重新渲染時，內部的變數和函式也會被重新創建，這可能導致子組件不必要的重新渲染，進而影響效能。為了避免這種情況，我們可以使用 memo...
鯨魚
‧
2024-10-09
在 React 中父組件重新渲染時，所有子組件也會重新渲染，即便這些子組件的 props 沒有發生變化。使用 memo 可以避免不必要的渲染，從而提升應用效能。...
鯨魚
‧
2024-10-08
今天我們要繼續介紹 TypeScript 的 Utility Types。這次要探索的是 Partial、Required 以及 Readonly，這些工具類型...
今天，我們要來實作一個報表和分析功能，讓健身房老闆可以一目了然地看到整個健身房的運營狀況。 1. 安裝必要的套件 首先，我們需要安裝 Recharts，這是一個...
延續昨天介紹的 Code Splitting，今天要介紹如何使用動態匯入來拆分程式碼，會以 React 的動態匯入來說明。 沒有動態匯入🤯 在介紹動態匯入前，...
透過使用 TypeScript 的 Utility Types，可以更靈活地操控型別，特別是在處理複雜的資料結構時。 接下來的這幾天，我們要來介紹 TypeSc...
今天，我們要來實作健身房管理系統中另一個重要的功能：課程管理。我們來建立課程列表頁面、課程詳情頁面，以及一個日曆來顯示課程安排。 1. 安裝必要的套件 首先，我...
React 在 component function 中提供了一個 useEffect hook 來 隔絕和管理副作用 。React 在每次 render 之後...
Component 的三大生命週期 生命週期就是指一個 React Component 在被創建到被銷毀的過程中，會經歷的一系列階段。 一. Mount Mou...
Document Metadata Document Metadata （如 <title>、<link> 和 <meta>...
useMemo 是 React 中用來記憶化計算結果的一個 Hook。能夠在每次重新渲染的時候緩存計算的結果，只有當某些依賴項發生變化時才會重新計算，這在處理昂...
鯨魚
‧
2024-10-07
隨著專案的成長，需要將父組件的資料傳遞給深層的子組件。這樣的資料傳遞過程會逐漸變得複雜且繁瑣。React 提供的 useContext Hook 能夠有效解決這...
鯨魚
‧
2024-10-06
昨天，我們終於將 Todo List 的功能完成，今天開始，我們要來探索一些先前沒有機會用到的小技巧以及觀念。 在 Todo List 中，所有的 <in...
今天要介紹的是 React 的 Hook 模式，嚴格來說 Hooks 不一定是一種設計模式，但它可以替代很多傳統的設計模式。介紹 Hooks 前，先來看看 R...
本系列文章 GitHub 在 Day23，我們提到了像 messageDetails 這樣只涉及少數元件的狀態，使用局部管理可以避免不必要的全域依賴並保持程式碼...
當呼叫 setState 後會發起 component re-render，React 會啟動 reconciliation 流程，最終更新瀏覽器的 DOM 並...
Ashley
Moscle.dev
ntuedtd113
Jamie
roni
Jaren
Monica
iThome鐵人賽
看影片追技術