react-patterns

此技能为采用 React 19 功能的现代 Web 应用程序提供了一个结构化框架。它专为需要维护高性能、可维护代码库并同时利用最新 React 生态系统进展的前端开发人员和软件工程师而设计。该技能指导用户通过 React Compiler 优化组件渲染路径、管理副作用，并在不同的状态同步策略之间做出决策。

• React Compiler 优化：识别纯组件、可序列化 props 的模式，并通过 DevTools 验证确保正确的记忆化（memoization）。

• Server Actions 与表单：利用现代 React 19 API（包括 useActionState 和 useOptimistic）促进以表单为中心的变更处理，并获得即时的 UI 反馈。

• 数据获取与 Hooks：提供用于处理 Promises 和 Context 的新 'use' hook 实现模式，同时区分 RSC (React Server Components) 与仅限 SPA 的模式。

• 变更策略：针对简单的 CRUD 操作与 TanStack Query (useMutation) 复杂的依赖缓存的 SPA 变更之间提供指导。

• 输入包括 TypeScript/React 项目中的组件文件、API 变更需求与现有的数据获取逻辑。

• 输出包含重构后的组件、优化的渲染逻辑、配置好的表单处理程序与改进的缓存失效流程。

• 实际限制：强调避免在 React Actions 与 TanStack Query 之间重复逻辑；需要 React 19 兼容性；假设熟悉标准 React 生命周期模式。

• 最佳实践：优先考虑 React Compiler 的内联事件处理程序，严格遵循纯函数原则，并在利用 'use' hook 处理数据流时善用 Suspense 边界。