Skip to content

Series

React 初心者大補帖

6 parts · read in order

Parts

01 Coding · React 初心者大補帖

React 初心者大補帖（1）：為什麼 const 可以在宣告前使用

在開發 React Component 或 Hook 時，常會看到像這樣的程式碼： 這看起來像是違反了 JavaScript 的規則，因為你在宣告 someStrategy 之前就用了它，但實際上這是合法的行為，也是 JavaScript 的預期表現。 一般來說，我們會在學習 JavaScript 的過程中看到這件事情：在 JavaScript 中，
By Anthea / 芫荽
02 Coding · React 初心者大補帖

React 初心者大補帖（2）：React Query 如何測試 onError

最近在幫一個有使用到 react-query 的元件寫測試時遇到一個狀況： 可以看到在上面的程式碼中，我有針對 error 做一些處理，因此我想寫個測試確認當我的 API 回傳錯誤後有正確的被處理： 但當我這執行測試後，卻發現測試執行不過： 可以從 console 中看到，錯誤是在驗證錯誤處理就被拋出了，在這裡下了 console log 之後可以看到目前的 result isLoading = true
By Anthea / 芫荽
03 Coding · React 初心者大補帖

React 初心者大補帖（3）：用自動販賣機範例學會 useImperativeHandle

在 React 裡，父元件通常 無法直接控制子元件的內部狀態或行為。但有時候，我們希望 父元件可以透過某些方法操作子元件，例如：重置狀態、讀取資料或觸發某些事件——這時候，useImperativeHandle 就能派上用場。 這篇文章將透過一個「自動販賣機」的範例，一步步了解： * 什麼是 useImperativeHandle * 它為什麼需要搭配 forwardRef * 如何在實務中運用它來建立一個「可由父元件遙控的子元件」
By Anthea / 芫荽
04 Coding · React 初心者大補帖

React 初心者大補帖（4）：正確使用 useEffect 的姿勢

在學習 React 的過程中，useEffect 是許多初學者常常感到困惑的一個 Hook。今天的筆記會記錄一下： * useEffect 的基本概念 * 使用時機 * 潛藏陷阱 🔍 Effect 是什麼？ Effect（副作用）是指 除了 return 值之外還會與外部互動或產生更大影響的行為。這些通常包含： * 向伺服器發送資料（如 API 請求）
By Anthea / 芫荽
05 Coding · React 初心者大補帖

React 初心者大補帖（5）：使用 useReducer 的正確姿勢

useReducer 是什麼？ 想像你有一個玩具盒 * useState ：直接把玩具丟進盒子裡，想要什麼就直接拿什麼 * useReducer ：你有一個聰明的機器人管家，你跟機器人說「我要做什麼」，機器人就幫你整理玩具盒 舉個例子：管理零用錢 基本語法和概念 什麼時候需要機器人管家？ 1. 事情很複雜時：要記錄很多東西（零用錢、存款、借錢記錄）並做很多計算，如果散開來寫很容易造成閱讀上的困難 2.
By Anthea / 芫荽
06 Coding · React 初心者大補帖

React 初心者大補帖（6）：跨元件共用的 Provider & Context

不管在使用 Vue 或是 React 開發時，常常遇到一個小困擾是：為了讓最底層的小組件拿到資料，需要一層一層傳遞 props，在 trace code 的時候就要一層一層爬回去，還有可能會在中間被篡改值，最後爬到迷路。 以購物網站為例，假設我們需要把使用者資訊、主題設定、購物車狀態傳到各種組件裡： function App() { const [user, setUser]
By Anthea / 芫荽

Footer

有隻芫荽

會一點前端和一點後端但只想躺平的寫扣人

Page 1 / 1

Back to start © 2026 有隻芫荽