舊版 React 程式碼庫變得難以維護，也無法獲得效能改進。本技能會引導您完成版本升級、Hooks 遷移，以及採用 React 18 並發功能。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-modernization". 帶有 componentDidMount 和 setState 的 Class 元件
النتيجة المتوقعة:
使用 useState 管理狀態並使用帶有空依賴陣列的 useEffect 處理 mount 邏輯、清理函式處理 unmount 的函式元件
استخدام "react-modernization". React 17 ReactDOM.render 呼叫
النتيجة المتوقعة:
React 18 createRoot API，搭配正確的容器元素選擇和錯誤邊界設定
استخدام "react-modernization". 事件處理常式中的同步狀態更新
النتيجة المتوقعة:
使用 transition 包裝的狀態更新，用於非緊急 UI 變更，並搭配 isPending 載入指示器
التدقيق الأمني
آمنStatic analyzer flagged 48 patterns but all are false positives. This skill contains documentation-only markdown files with React code examples. Dynamic imports are standard React lazy() patterns, shell commands are documentation for codemod usage, and fetch calls are example code snippets. No executable code exists in this skill.
درجة الجودة
ماذا يمكنك بناءه
舊版 React 應用程式升級
將較舊的 React 16 應用程式升級至 React 18，獲得自動批次處理和並發功能
Class 轉 Hooks 遷移
將帶有生命週期方法的 class 元件轉換為使用 useState 和 useEffect 的現代函式元件
效能優化
實作程式碼分割、記憶化和 Suspense 邊界，以改善應用程式效能
جرّب هذه الموجهات
將此 React class 元件轉換為使用 Hooks。識別要轉換為 useState 和 useEffect 的狀態變數和生命週期方法。
分析我的 React 程式碼庫，找出從 React 17 升級到 18 時的破壞性變更。列出所有需要修改的檔案，並提供遷移檢查清單。
產生在我的專案中執行 React codemods 的命令。包括 jscodeshift 安裝、生命週期方法的特定轉換，以及新的 JSX 轉換。
重構此搜尋元件以使用 useTransition 處理非緊急更新。展示如何為資料獲取實作 Suspense 邊界，並提供適當的載入狀態。
أفضل الممارسات
- 從沒有子項的葉元件開始，逐步進行增量遷移
- 每個遷移步驟後執行全面測試，以及早發現回歸問題
- 使用 React StrictMode 識別開發過程中的 Unsafe 模式和副作用
تجنب
- 在未測量實際效能問題的情況下添加 useMemo 或 useCallback
- 忘記在 useEffect 依賴陣列中包含所有依賴項
- 在同一元件中混合 class 元件模式和 Hooks