component-refactoring
重構複雜的 React 元件
複雜的 React 元件會變得難以測試和維護。此技能提供模式和工作流程，透過提取 hooks、拆分子元件並應用 Dify 特定規範來重構高複雜度元件。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "component-refactoring". 分析 web/app/components/workflow/index.tsx 的複雜度
النتيجة المتوقعة:
複雜度分析：
- 總複雜度：72（目標：<50）
- 最大函式複雜度：28
- 行數：420（目標：<300）
主要複雜度來源：
1. handleSubmit 回呼函式：+15 複雜度（巢狀條件）
2. 用於資料同步的 useEffect：+12 複雜度（巢狀回呼）
3. 渲染方法：+10 複雜度（switch/case 鏈）
建議行動：
1. 提取 useWorkflowState hook
2. 將表單處理拆分到獨立元件
3. 將資料同步邏輯移至 useEffect hook
استخدام "component-refactoring". 從 ConfigurationForm 元件提取 hooks
النتيجة المتوقعة:
已提取的 Hooks：
- useModelConfig：管理模型設定狀態
- useDatasetSelection：處理資料集選擇器邏輯
- useFormValidation：表單驗證邏輯
檔案結構：
web/app/components/form/
hooks/
use-model-config.ts
use-dataset-selection.ts
use-form-validation.ts
ConfigurationForm.tsx
index.ts
التدقيق الأمني
آمنThis is a documentation and guidance skill for React component refactoring. Static analyzer flagged 214 potential issues in markdown documentation files, all of which are false positives: backticks in code examples were detected as shell commands, code patterns triggered crypto/blocker alerts, and Object.keys() was flagged as certificate/key files. The skill provides reference documentation only and does not execute any code.
درجة الجودة
ماذا يمكنك بناءه
降低元件複雜度
當 React 元件超過複雜度閾值（>50）或行數（>300）時，使用此技能透過 hook 提取和元件拆分來系統性地降低複雜度。
標準化 Hook 模式
應用 Dify 規範來組織 hooks/ 子目錄中的自訂 hooks，或使用 use- 前綴命名放置在元件旁。
為測試準備元件
在撰寫測試之前重構複雜元件，確保元件可測試並符合複雜度閾值。
جرّب هذه الموجهات
使用 pnpm analyze-component 檢查 web/app/components/example.tsx 的複雜度。複雜度分數是多少？主要的複雜度來源是什麼？
分析 web/app/components/form-config/index.tsx 並識別提取自訂 hooks 的機會。展示符合 Dify 規範的建議 hook 結構。
位於 web/app/components/config/index.tsx 的 Configuration 元件複雜度為 85。建議如何將其拆分為子元件，同時維持 Dify 模式。
對 web/app/components/app/configuration/index.tsx 執行 pnpm analyze-component，並產生完整的重構計畫，包括 hook 提取、子元件拆分和複雜度降低目標。
أفضل الممارسات
- 在重構前執行複雜度分析以建立基準指標
- 當狀態管理超過 3-5 個 useState 呼叫時，及早提取 hooks
- 遵循 Dify 命名規範：hooks 放在 hooks/ 目錄或使用 use-*.ts 前綴
تجنب
- 不必要地重構已符合複雜度閾值的元件
- 提取僅在單一元件中使用的 hooks（偏好內聯）
- 建立過多小型元件而影響程式碼導航