KD's Tech Blog

Hi, 我是 KD Chang 凱迪，紀錄關於軟體開發/程式設計/工程思維的技術筆記 | KD 技術部落格

React 效能優化入門教學筆記 | 學習筆記

前言隨著前端應用日益龐大，單頁應用（SPA）在初次載入時常面臨 JavaScript 檔案過大、載入時間過久的問題，導致使用者等待時間過長、效能下降。為了解決這個問題，React 與現代建構工具（如 Webpack、Vite）提供了 Code Splitting（程式碼分割）與 Lazy Loading（延遲載入）兩種策略，協助開發者更有效地管理與優化應用程式的載入流程。 程式碼分割（Cod......

Posted by kdchang on 2024-12-26

React 效能優化入門教學筆記 | 學習筆記

前言React 作為現代前端開發的主流函式庫之一，強調 UI 的組件化與狀態驅動式渲染。然而，隨著應用規模擴大與資料變得動態頻繁，React 應用可能出現重新渲染過多、載入過慢或記憶體占用過高等問題，影響使用者體驗與開發效率。為此，瞭解與掌握 React 的效能優化技巧，成為中高階開發者的重要功課。 本篇筆記將介紹 React 效能優化的核心原則與常見實作方式，搭配簡單的程式碼範例說明實際操......

Posted by kdchang on 2024-12-25

React 效能優化 SOP 檢核清單入門教學筆記 | 學習筆記

前言在大型單頁應用（SPA）與複雜互動式介面中，效能瓶頸常常來自不必要的重新渲染、大型 bundle 導致的載入緩慢，以及過度操作 DOM 所造成的卡頓。建立一份標準化的「效能優化檢核清單」（SOP，Standard Operating Procedure），能夠在開發流程中明確指出應檢查的重點、落實最佳實踐，並透過持續監控與回饋，進一步強化團隊的效能意識與程式品質。 本篇筆記將依照從「程式......

Posted by kdchang on 2024-12-24

React Context API 入門教學 | 學習筆記

前言React Context API 是 React 提供的一種方式，讓我們能夠在組件樹中傳遞資料，而不需要一層層地使用 props。Context API 可以解決多層嵌套組件的傳遞問題，讓我們在深層組件中輕鬆訪問到全局狀態。本文將介紹如何使用 React Context API，並提供一個簡單的範例來展示其實際應用。 什麼是 React Context APIReact Context......

Posted by kdchang on 2024-12-21

React useMemo 與 useCallback 差異介紹與入門教學 | 學習筆記

前言在使用 React hooks 進行開發時，useMemo 和 useCallback 是兩個常被提及的性能優化工具。它們都屬於 記憶化（memoization） 技術，用來避免不必要的重算與重渲染。然而，很多初學者在理解這兩者的用途與差異時常感到困惑。這篇文章將從概念出發，並搭配實際範例，幫助你掌握 useMemo 與 useCallback 的核心用途與實作方式。 一、共通點：記憶......

Posted by kdchang on 2024-12-20

React 與 Next.js 入門教學筆記 | 學習筆記

1. React 簡介React 是由 Facebook（現 Meta）開發的 JavaScript 前端函式庫，主要用於構建 UI 元件。它採用組件化開發方式，並透過 Virtual DOM 提升效能。 2. Next.js 簡介Next.js 是一個基於 React 的框架，提供伺服器端渲染（SSR）、靜態網站生成（SSG）等功能，讓開發者能夠更輕鬆地開發 SEO 友好的應用程式。 3.......

Posted by kdchang on 2024-11-16

React Custom Hooks 入門教學 | w3schools 學習筆記

前言在 React 應用程式中，隨著功能的增加與維護需求的提升，我們常常會遇到多個元件需要共享相同邏輯的情況。為了避免重複撰寫相似程式碼、增加維護成本，React 提供了一個優雅的解法：自訂 Hook（Custom Hook）。 自 React 16.8 版本開始，我們能使用 Hook 來管理狀態與副作用，而自訂 Hook 則是讓我們可以把邏輯封裝起來，像一般函式一樣在多個元件中重複使用。這......

Posted by kdchang on 2024-01-23

React Hooks useMemo 入門教學 | w3schools 學習筆記

前言在 React 的開發中，我們常會遇到一些運算成本高昂（expensive）的函式，例如複雜的計算或操作大量資料。如果這些運算每次重新渲染都會重新執行，可能會導致效能低落，甚至造成使用者界面的卡頓或延遲。此時，我們可以使用 React 的 useMemo Hook，透過「記憶化」（memoization）技術，避免不必要的重新計算，從而提升效能。 本文將說明 useMemo 的用途、使用......

Posted by kdchang on 2024-01-22

React Hooks useCallback 入門教學 | w3schools 學習筆記

前言在 React 中，每次元件重新渲染時，元件內部定義的函式也會被重新建立。這會導致某些子元件即使其 props 沒有變動，卻仍然會被重新渲染，造成效能浪費。useCallback Hook 是 React 提供的工具，用來記憶（memoize）函式的參考，以避免不必要的重新渲染。它的使用情境與 useMemo 類似，不同之處在於：useMemo 記憶的是「值」，而 useCallback......

Posted by kdchang on 2024-01-21

React Hooks useReducer 入門教學 | w3schools 學習筆記

前言在 React 中，useState 是管理狀態的基礎 Hook，但當應用的狀態邏輯越來越複雜，像是涉及多個欄位更新、交叉依賴或分支邏輯，使用 useState 可能變得難以維護。這時，React 提供的 useReducer Hook 是一個更合適的選擇。 useReducer 的概念與 Redux 類似，它讓你將狀態管理邏輯集中在一個 reducer 函式中，透過 dispatch ......

Posted by kdchang on 2024-01-20

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品/專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS