SuperAPI AI 工具集

react-patterns

前端与建站

查看项目

更新于 10-16 00:03

技能介绍

用途:在实现 React 19 特性、优化组件性能,或在 Actions 与 TanStack Query 之间选择变更(mutation)方案时使用,提供现代 React 19 模式与最佳实践。

主要能力:

  1. Compiler 友好代码:保持组件纯函数、props 可序列化,在渲染期派生值而非存入 ref,事件处理器尽量内联;用 React DevTools 的 Memo ✨ 徽章验证编译器是否生效,必要时用 'use no memo' 临时退出优化。
  2. Actions 与表单:使用 <form action={fn}>、useActionState、useOptimistic 处理表单提交、简单 CRUD 与内置校验;SSR/RSC 场景加 'use server',SPA 可省略。
  3. TanStack Query 变更:适合非表单变更(按钮点击)、需要回滚的复杂乐观更新、与既有 Query 缓存集成,以及需要更细粒度缓存与失效控制的场景。同一功能不要在两套方案间重复逻辑。
  4. use Hook:解包 Promise 与 Context,配合 Suspense 使用;SPA 中数据获取优先用 TanStack Query 与路由 loader。
  5. 组件组合:复合组件、必要时使用 render props。
  6. 错误边界:React 19 仍需类组件或使用 react-error-boundary 库。

选择建议:表单提交带校验、SSR/RSC 应用、简单表单 CRUD 用 React Actions;按钮点击变更、需乐观更新与回滚、需集成既有缓存、SPA 复杂数据流用 TanStack Query。SPA 已用 TanStack Query 时优先 Query 变更以保持一致。

限制:资料未提供安装命令、收费与平台信息;错误边界在 React 19 中仍依赖类组件或第三方库。