JavaScript 資料是怎麼儲存的？深入了解 Value Type 與 Reference Type
你可能遇過這種狀況： const a = [1, 2, 3]; const b = [1, 2, 3]; console.log(a === b); // false 看起來陣列內容一模一樣，為什麼卻...
useReducer：更強大的 state 管理方法
當你開始寫 React 的時候，useState 絕對是最先學的 Hook。 它用起來直覺、方便，適合處理簡單的狀態更新。 但隨著應用越來越複雜，你會發現用 useState 管理多個狀態、或是多步驟...
理解程式設計中的「派發（Dispatch）」
在日常生活中，我們時常會遇到「派發」的情境——警察局派遣警員處理事故、物流中心派車送貨、學校派任老師處理某項任務。 這些場景的共通點是：接收到一個「請求」後，系統會選擇一個適當的處理者來「執行任務」。...
useContext 入門：跨層資料傳遞不再痛苦
你是否曾經遇過這樣的情境：一個全域資料（像是使用者登入狀態、主題模式、語言設定），必須從最上層的元件層層傳遞到子孫元件？ 這種層層傳遞 props 的痛苦，我們稱為 prop drilling。 當你...
為什麼 React 在「沒資料時」也要先渲染？——揭開 useEffect 與元件渲染時機的真相
你是否在學習 React 時，有過這樣的困惑？ 我明明要等 API 回傳資料再顯示，為什麼 React 一開始就先 render 一次？ 明明沒資料，畫面先空著不奇怪嗎？ useEffect 執行時不...
useRef 入門：如何存資料又不觸發重新渲染？
在 React 中，useState 是大家學得最多也用得最熟的 Hook。 它能讓元件擁有「狀態」，一但你用 setState 更新資料，React 就會重新渲染畫面，這樣我們才能看到最新的變化。 ...
useEffect 入門：畫面變動後要做的事怎麼寫？
當你學會了 useState，可以讓元件「有自己的資料」後，下一步會發現： 「有些事情我不是在 render 當下要做，而是畫面顯示完後才做。」 舉幾個例子： 向後端 API 發送請求載入資料 開始一...
useState 入門：讓元件擁有自己的資料
在學會 React 元件後，你可能會發現一個問題：當畫面重新渲染時，元件內的變數好像會「歸零」？ 舉個例子，如果你寫了一個 let count = 0，但當使用者點按按鈕後畫面更新，count 還是從...
React 核心觀念解密：setCount 究竟是什麼？為何它能同時接收數值與函式？
在學習 React 的過程中，很多新手會遇到這個看似簡單卻超關鍵的問題： setCount(count + 1) 和 setCount(prev => prev + 1) 差在哪裡？ 什麼時候該用哪一...
React 元件生命週期一次搞懂：從誕生到離開，它經歷了哪些階段？
在你踏入 Hook 的世界之前，有一個觀念非常關鍵 —— 你要先了解 React 元件是怎麼「活著」的。 React 並不是畫面 render 一次就結束，它背後其實運行著一套「生命週期」的機制，幫助...