react-best-practices

用途：该技能提供基于 React 19+ 与 Next.js App Router 的工程标准，用于构建高性能、可维护、可访问的 React 应用。主要能力与要点：架构与渲染上，新项目优先使用 App Router（app/），默认使用服务端组件（RSC），仅在需要状态、hooks 或事件监听等交互时添加 'use client'，用 <Suspense> 流式渲染依赖慢数据的 UI，并直接在异步服务端组件中取数，避免用 useEffect 取数。组件模式上，用 children 组合减少 prop drilling，按原子性组织组件（大规模时更推荐按功能组织文件夹），把复杂逻辑抽成自定义 Hook，props 使用严格 TypeScript 接口并避免 any。状态管理上，可分享状态（筛选、分页）放入 URL Search Params，客户端缓存可用 TanStack Query 或 SWR，全局状态尽量少用 Zustand/Context，优先本地状态与组合。性能上始终用 next/image 并指定宽高与 sizes，用 next/font 消除布局偏移，用 next/dynamic 或 React.lazy 懒加载首屏以下的重型客户端组件，并用 @next/bundle-analyzer 检查体积。样式上采用 Tailwind CSS 工具优先写法，配合 clsx 与 tailwind-merge（通常封装为 cn()）合并条件类名，并遵循移动优先再叠加 md:、lg: 前缀。目录采用功能优先结构，app/ 下可含路由组、(私有) 组件目录、layout、loading 等，另有共享 components/、lib/、hooks/、types/。安全上注意 dangerouslySetInnerHTML 的 XSS 风险，用 NextAuth.js（Auth.js）或 Clerk 做认证并通过中间件保护路由。提交前检查清单包括：是否只在必要时使用 'use client'、列表 key 是否稳定、数据是否尽量在服务端获取、图片是否优化。收费、价格与具体获取方式：暂未提供。