鐵人檔案
我平常主要使用 Nuxt 做前端開發，但接下來想往 React / Next.js 的職缺挑戰。於是就把鐵人賽當作訓練營，30 天每天記錄學習，邊補基礎、邊實作，也順便整理一些面試常見問題。
內容會從 React Hooks、組件思維一路寫到 Next.js 的路由、SSR/SSG、Middleware，再延伸到部署、SEO，以及面試常問的情境題。文章不會太硬，重點是「邊學邊寫」，就算不是大神，也能和大家一起交流。
希望 30 天後，能把這些筆記變成自己準備面試的武器，也讓同樣在轉換框架或準備面試的朋友有些參考 🙌
在學 React 的時候，你可能聽過一句話： React component 應該要是 pure function。 但什麼是 pure function？...
寫 React 時，可能覺得很自然就直接用 <div>、<h1> 這些看起來像 HTML 的語法。但其實，瀏覽器本身並不認識這種寫法。這...
當我們在寫 React 時， 一個 component 是怎麼「出生 → 更新 → 死亡」的？這段過程就叫做 生命週期 (Lifecycle)。理解生命週期，不...
什麼 React 不直接操作 DOM？既然瀏覽器本來就能用 document.querySelector()、innerHTML 來更新畫面，為什麼還要搞一個「...
「你有沒有想過，當我們呼叫 setState 改變一個小值時，為什麼 React 不會整個網頁重新渲染？」React 背後有一個秘密武器，叫做 Reconcil...
你有沒有遇過這種情況：在 React 中渲染一個待辦清單，點了「新增任務」按鈕，結果輸入框的值跑到另一個項目去了？ 這其實就是因為 少了正確的 key。 概念解...
在 React 裡，你常常聽到「不要直接修改 state」。真正的原因是：React 偵測不到你直接改了內容。 React 如何判斷 state 是否改變？ R...
在 React 發展的歷史裡，重用邏輯 (logic reuse) 一直是個難題。Class component 時代，我們常用 HOC 或 Render Pr...
學 React 的時候，你一定聽過一句規則： Hooks 必須在最上層呼叫不要放在 if / for / while / 條件式裡！React 為什麼要這樣限...
在 React function component 中，常常需要處理 副作用 (side effects)，例如： 抓 API 資料 綁定或移除事件（scr...
