1
React 元件生命週期一次搞懂：從誕生到離開，它經歷了哪些階段？
在你踏入 Hook 的世界之前，有一個觀念非常關鍵 —— 你要先了解 React 元件是怎麼「活著」的。 React 並不是畫面 render 一次就結束，它背後其實運行著一套「生命週期」的機制，幫助我們在適當的時機做適當的事情。 這篇文章，我們不談 Hook、不談函式型元件，只專注在 class...
2025年4月14日
JavaScript
共 13 篇文章
在你踏入 Hook 的世界之前，有一個觀念非常關鍵 —— 你要先了解 React 元件是怎麼「活著」的。 React 並不是畫面 render 一次就結束，它背後其實運行著一套「生命週期」的機制，幫助我們在適當的時機做適當的事情。 這篇文章，我們不談 Hook、不談函式型元件，只專注在 class...
在學習 React 的過程中，很多初學者都會卡在「Class Component」這一關。 state、生命週期方法、this 綁定問題……常常讓人看得一頭霧水。 不只新手覺得困難，就連有經驗的工程師也不時被這些語法搞得暈頭轉向。 React 團隊注意到這個痛點，於是在 React 16.8 推出了...
在學會 React 元件後，你可能會發現一個問題：當畫面重新渲染時，元件內的變數好像會「歸零」？ 舉個例子，如果你寫了一個 let count = 0，但當使用者點按按鈕後畫面更新，count 還是從 0 開始。 那該怎麼辦呢？這就是 React 提供的第一個 Hook —— useState 派上...
在學習 React 的過程中，很多新手會遇到這個看似簡單卻超關鍵的問題： setCount(count + 1) 和 setCount(prev => prev + 1) 差在哪裡？ 什麼時候該用哪一種？為什麼可以這樣寫？ 這篇文章將從最根本的語法開始解釋，再深入到 React 背後的運作邏輯，並透...
當你學會了 useState，可以讓元件「有自己的資料」後，下一步會發現： 「有些事情我不是在 render 當下要做，而是畫面顯示完後才做。」 舉幾個例子： 向後端 API 發送請求載入資料 開始一個計時器 DOM 操作（例如設定 focus） 設定訂閱事件、WebSocket、甚至是 Googl...
你是否在學習 React 時，有過這樣的困惑？ 我明明要等 API 回傳資料再顯示，為什麼 React 一開始就先 render 一次？ 明明沒資料，畫面先空著不奇怪嗎？ useEffect 執行時不是應該是 componentDidMount 階段嗎？那不就是 render 完了才抓資料？ 別急，...
在 React 中，useState 是大家學得最多也用得最熟的 Hook。 它能讓元件擁有「狀態」，一但你用 setState 更新資料，React 就會重新渲染畫面，這樣我們才能看到最新的變化。 但你有沒有遇過這種情境： 我只想記住一個資料（例如：上一次按鈕點擊的時間），根本不需要重新渲染畫面。...
你是否曾經遇過這樣的情境：一個全域資料（像是使用者登入狀態、主題模式、語言設定），必須從最上層的元件層層傳遞到子孫元件？ 這種層層傳遞 props 的痛苦，我們稱為 prop drilling。 當你的元件結構越來越深，維護成本也隨之升高。 為了解決這個問題，React 提供了一個內建機制 —— C...
在日常生活中，我們時常會遇到「派發」的情境——警察局派遣警員處理事故、物流中心派車送貨、學校派任老師處理某項任務。 這些場景的共通點是：接收到一個「請求」後，系統會選擇一個適當的處理者來「執行任務」。 在電腦科學中，這個動作就叫做「派發（dispatch）」。
當你開始寫 React 的時候，useState 絕對是最先學的 Hook。 它用起來直覺、方便，適合處理簡單的狀態更新。 但隨著應用越來越複雜，你會發現用 useState 管理多個狀態、或是多步驟流程時會變得難以維護，甚至常常改錯資料、讓 bug 悄悄溜進來。 這時候，useReducer 就能...
你的 React 專案越做越大，可能會遇到這樣的問題： 畫面沒改到的地方也重新渲染了、同樣的計算一直重複、操作起來變得卡卡的… 這時，你就需要學會效能優化了！ 本篇文章會帶你了解兩個超重要的 Hook： useMemo：記憶計算結果，避免不必要的重算 useCallback：記憶函式參考...
學習 React 的過程中，你可能會遇到一個有趣的現象：Hook（像是 useState, useEffect）只能用在元件裡，不能用在普通函式中。 例如： function MyComponent() { const [isOpen, toggleOpen] = useToggle(); //...
學會基本的 React Hook（如 useState、useEffect）後，你可能會發現： 有些邏輯會在好幾個元件中重複出現 元件變得又長又難讀，因為邏輯與畫面混在一起 每次寫類似的邏輯都要重新複製貼上 這時，你就需要 自訂 Hook（Custom Hook） 來幫你「抽出邏輯」、「共用邏輯」，...