React 自定義 Hook 怎麼抽取和測試提示詞（入參與返回值設計、副作用清理、renderHook 測試）
幾個組件裏出現了相似的 useState 加 useEffect 邏輯，想抽成自定義 Hook 又怕抽壞時用。貼出組件代碼，AI 先判斷哪些值得抽，再分輪設計接口、實現並寫清理邏輯，最後給出 renderHook 測試用例。
通用大模型 對話模型通用
下面是我項目裏幾個組件的代碼，其中有重複或纏在一起的邏輯。請幫我判斷哪些值得抽成自定義 Hook，再把 Hook 和測試寫出來。 React 版本：[React 版本] 測試工具：[測試工具]（例：Vitest + React Testing Library） 我想複用的邏輯（可選）：[想複用的邏輯] 組件代碼： [粘貼組件代碼] 請分四輪進行。第一輪結束後停下等我確認，再繼續後面三輪。 第一輪：只做判斷，不寫代碼。 - 列出候選邏輯，每個註明出現在哪些組件、用到了哪些內置 Hook； - 判斷該不該抽：只在一處出現且不復雜的，建議留在原地；沒有用到任何 Hook 的純計算，建議抽成普通函數而不是 Hook； - 對值得抽的，給出名字（以 use 開頭）和一句話職責。 第二輪：設計接口。 - 入參：盡量傳原始值；必須傳對象或函數時，說明它的引用每次渲染都變會怎樣影響依賴數組，由誰負責保持穩定； - 返回值：兩個以內可用數組（方便調用方改名），再多就用對象；返回的函數是否需要保持引用穩定； - 寫明這個 Hook 不負責什麼（例如不彈提示、不做跳轉）。 第三輪：實現。 - 每個副作用都寫清理：定時器、事件監聽、訂閱要取消；請求要處理「組件已卸載」和「後發的請求先返回」兩種情況； - 給出原組件改用新 Hook 之後的寫法，行為必須與原來一致，不順手改別的。 第四輪：測試。用 renderHook 和 act 來寫，至少覆蓋：初始值、入參變化後的結果、卸載後清理是否生效；涉及時間的用假定時器。每條用例註明它防的是哪種迴歸。 測試庫的導入路徑和 API 以我所用版本的文檔為準，不確定處標「需核對」。
高亮處換成你自己的內容：[React 版本]、[測試工具]、[想複用的邏輯]、[粘貼組件代碼]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[粘貼組件代碼] 至少貼兩個有相似邏輯的組件，AI 才能看出哪部分是真重複、哪部分只是長得像。[測試工具] 寫清楚測試運行器和渲染庫，例如「Jest + React Testing Library」，假定時器的寫法會隨之不同。[想複用的邏輯] 可以只寫一句「搜尋框的防抖」，不寫也行。
常見問題與調整：
- 抽出來的 Hook 參數有七八個 → 追問：「這個 Hook 是不是管得太多了？請拆成兩個職責單一的 Hook，並說明拆分依據。」
- 測試偶爾失敗 → 追問：「檢查測試裏有沒有真實定時器或未等待的異步更新，改成假定時器並用 act 包住狀態更新。」
- 想確認行為沒變 → 追問：「列出抽取前後在渲染次數、請求次數上可能出現差異的地方。」
示例輸出
示例，僅供參考（兩個搜尋組件裏都有「輸入停頓 300 毫秒後再請求」的邏輯，第三、四輪節選）
Hook 只負責「把一個變化頻繁的值延遲輸出」，請求仍由組件自己發。
ts
export function useDebouncedValue<T>(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value)
useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay)
return () => clearTimeout(id) // 值再次變化或組件卸載時，清掉上一個定時器
}, [value, delay])
return debounced
}測試（已開啟假定時器），防的是「延遲沒到就更新」這種迴歸：
ts
const { result, rerender } = renderHook(({ v }) => useDebouncedValue(v, 300), {
initialProps: { v: 'a' },
})
rerender({ v: 'ab' })
expect(result.current).toBe('a') // 時間沒到，仍是舊值
act(() => { vi.advanceTimersByTime(300) })
expect(result.current).toBe('ab')同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～