KD's Tech Blog

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

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

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

前言在 React 中，useRef 是一個非常實用的 Hook，它提供了一個方法來在元件重新渲染之間保留值。不同於 useState，當 useRef 的值改變時不會觸發元件重新渲染，這使它成為追蹤狀態變化、儲存 DOM 參考或避免不必要重新渲染的理想選擇。 本文將深入說明 useRef 的三種主要用途： 避免重新渲染的狀態儲存 直接操作 DOM 元素 追蹤先前的狀態值 重點摘要 u......

Posted by kdchang on 2024-01-19

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

前言在 React 應用程式中，當需要在多個巢狀元件之間共享資料時，傳遞 props 是最基本的做法。但當元件層級變深，這樣的資料傳遞會變得繁瑣且難以維護，這種情況被稱為「props drilling」。為了解決這個問題，React 提供了 Context API，搭配 useContext Hook 可以讓你在不需要一層層傳遞 props 的情況下，輕鬆地在深層元件中讀取共享的狀態。 重......

Posted by kdchang on 2024-01-18

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

前言在 React 函式型元件中，useEffect 是一個強大且常用的 Hook，用來處理副作用（side effects）。副作用指的是那些不直接涉及元件渲染的操作，例如：發送 API 請求、操作 DOM、設定或清除計時器等。 傳統上，這些操作會在 componentDidMount、componentDidUpdate 或 componentWillUnmount 等生命週期函式中進行......

Posted by kdchang on 2024-01-18

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

前言在 React 函式元件中，useState 是最常用的 Hook 之一，能讓我們在無需使用 class 的情況下新增與管理元件的「狀態」（state）。狀態是指會隨著使用者互動或應用邏輯變化而更新的資料，例如：輸入框的內容、按鈕點擊次數、切換的主題顏色等。 重點摘要 useState 是 React 提供的 Hook，用來在函式型元件中儲存與更新狀態。 使用前需先從 react 匯入......

Posted by kdchang on 2024-01-17

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

前言Hooks 是在 React 16.8 版本中加入的新功能。Hooks 讓你可以在「函式元件（function components）」中使用狀態（state）以及其他 React 功能。因此，自從有了 Hooks 之後，類別元件（class components）通常就不再是必要的了。 儘管 Hooks 幾乎取代了類別元件的使用方式，但 React 團隊目前並沒有打算移除 class ......

Posted by kdchang on 2024-01-16

在 React 中使用 Sass 進行樣式設計教學 | w3schools 學習筆記

前言在現代前端開發中，維護與管理 CSS 樣式是一項重要任務，尤其當應用程式日益龐大、元件複雜時，單純使用原生 CSS 經常會遇到樣式難以重用、命名衝突等問題。這時候，Sass（Syntactically Awesome Stylesheets）這類 CSS 預處理器便顯得格外實用。Sass 提供變數、巢狀語法、Mixin 等強大功能，有助於讓樣式更具模組化與可維護性。 本篇教學將說明如何在......

Posted by kdchang on 2024-01-15

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

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

FRIENDS