[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-a8d65174-d0bb-4bc8-985a-ebe4c6025f9d":3,"$fuR-ZjkEFnLZ6DNqsFhLyIHxs6DI-PDT35sidnhUllDI":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"a8d65174-d0bb-4bc8-985a-ebe4c6025f9d","react-patterns","现代React模式和原则。Hooks、组合、性能、TypeScript最佳实践。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: react-patterns\ndescription: \"Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.\"\nrisk: safe\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# React Patterns\n\n> Principles for building production-ready React applications.\n\n---\n\n## 1. Component Design Principles\n\n### Component Types\n\n| Type | Use | State |\n|------|-----|-------|\n| **Server** | Data fetching, static | None |\n| **Client** | Interactivity | useState, effects |\n| **Presentational** | UI display | Props only |\n| **Container** | Logic\u002Fstate | Heavy state |\n\n### Design Rules\n\n- One responsibility per component\n- Props down, events up\n- Composition over inheritance\n- Prefer small, focused components\n\n---\n\n## 2. Hook Patterns\n\n### When to Extract Hooks\n\n| Pattern | Extract When |\n|---------|-------------|\n| **useLocalStorage** | Same storage logic needed |\n| **useDebounce** | Multiple debounced values |\n| **useFetch** | Repeated fetch patterns |\n| **useForm** | Complex form state |\n\n### Hook Rules\n\n- Hooks at top level only\n- Same order every render\n- Custom hooks start with \"use\"\n- Clean up effects on unmount\n\n---\n\n## 3. State Management Selection\n\n| Complexity | Solution |\n|------------|----------|\n| Simple | useState, useReducer |\n| Shared local | Context |\n| Server state | React Query, SWR |\n| Complex global | Zustand, Redux Toolkit |\n\n### State Placement\n\n| Scope | Where |\n|-------|-------|\n| Single component | useState |\n| Parent-child | Lift state up |\n| Subtree | Context |\n| App-wide | Global store |\n\n---\n\n## 4. React 19 Patterns\n\n### New Hooks\n\n| Hook | Purpose |\n|------|---------|\n| **useActionState** | Form submission state |\n| **useOptimistic** | Optimistic UI updates |\n| **use** | Read resources in render |\n\n### Compiler Benefits\n\n- Automatic memoization\n- Less manual useMemo\u002FuseCallback\n- Focus on pure components\n\n---\n\n## 5. Composition Patterns\n\n### Compound Components\n\n- Parent provides context\n- Children consume context\n- Flexible slot-based composition\n- Example: Tabs, Accordion, Dropdown\n\n### Render Props vs Hooks\n\n| Use Case | Prefer |\n|----------|--------|\n| Reusable logic | Custom hook |\n| Render flexibility | Render props |\n| Cross-cutting | Higher-order component |\n\n---\n\n## 6. Performance Principles\n\n### When to Optimize\n\n| Signal | Action |\n|--------|--------|\n| Slow renders | Profile first |\n| Large lists | Virtualize |\n| Expensive calc | useMemo |\n| Stable callbacks | useCallback |\n\n### Optimization Order\n\n1. Check if actually slow\n2. Profile with DevTools\n3. Identify bottleneck\n4. Apply targeted fix\n\n---\n\n## 7. Error Handling\n\n### Error Boundary Usage\n\n| Scope | Placement |\n|-------|-----------|\n| App-wide | Root level |\n| Feature | Route\u002Ffeature level |\n| Component | Around risky component |\n\n### Error Recovery\n\n- Show fallback UI\n- Log error\n- Offer retry option\n- Preserve user data\n\n---\n\n## 8. TypeScript Patterns\n\n### Props Typing\n\n| Pattern | Use |\n|---------|-----|\n| Interface | Component props |\n| Type | Unions, complex |\n| Generic | Reusable components |\n\n### Common Types\n\n| Need | Type |\n|------|------|\n| Children | ReactNode |\n| Event handler | MouseEventHandler |\n| Ref | RefObject\u003CElement> |\n\n---\n\n## 9. Testing Principles\n\n| Level | Focus |\n|-------|-------|\n| Unit | Pure functions, hooks |\n| Integration | Component behavior |\n| E2E | User flows |\n\n### Test Priorities\n\n- User-visible behavior\n- Edge cases\n- Error states\n- Accessibility\n\n---\n\n## 10. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Prop drilling deep | Use context |\n| Giant components | Split smaller |\n| useEffect for everything | Server components |\n| Premature optimization | Profile first |\n| Index as key | Stable unique ID |\n\n---\n\n## 11. File Structure\n\n\u003Cimg width=\"1150\" height=\"1438\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F10369698-472c-4695-a494-2c0672103aa1\" \u002F>\n\nUse this image as a reference for a better file structure of the project\n\n---\n\n> **Remember:** React is about composition. Build small, combine thoughtfully.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,126,274,"2026-05-16 13:36:33",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"e8e3bc44-c7fa-4e3b-ae4d-e92a98596981","1.0.0","react-patterns.zip",2213,"uploads\u002Fskills\u002Fa8d65174-d0bb-4bc8-985a-ebe4c6025f9d\u002Freact-patterns.zip","fa42ad72678227c5f33774be6e9c7d1f17a7ceb952cf103639f61f95e9090766","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":4465}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]