SuperAPI AI 工具集

react-web

前端与建站

查看项目

更新于 10-15 22:16

技能介绍

用途:使用 React 19+ 特性构建现代、高性能的 React Web 应用,覆盖组件编写、数据获取、表单处理与性能优化。

主要能力:

  1. 函数组件与 TypeScript:以接口定义 props,如 variant、children、onClick 等。
  2. Server Components:React 19 默认在服务端渲染,减少客户端 JavaScript,可直接在组件内 await 数据查询。
  3. Client Components:用 'use client' 标记交互组件,配合 useState 等 Hook。
  4. Actions 与 useActionState:替代手动表单处理,返回状态并暴露 pending。
  5. use() Hook:读取 Promise 与 Context,Promise 未完成时挂起。
  6. useOptimistic:实现即时乐观 UI 更新。
  7. useFormStatus:从 react-dom 读取表单提交状态。
  8. 项目结构建议:app、components(ui/features/layouts)、hooks、lib、types、styles。
  9. 自定义 Hook 模式:如 useAsync 封装 loading、data、error。
  10. 性能指南:依赖 React Compiler 自动记忆化,避免不必要的 useMemo/useCallback;默认服务端渲染,仅在需要交互时加 'use client';用 React.lazy() 与 Suspense 做路由懒加载与代码分割;避免 prop drilling,改用 Context 或组合模式。

使用方式:按上述模式编写组件与 Hook;表单使用 action 属性配合 useActionState 或 useFormStatus;数据获取优先放在 Server Component 中。

适用场景:需要 React 19+ 新特性、服务端渲染、表单 Actions 与乐观更新的 Web 项目。

限制:资料未提供安装命令、依赖版本、收费与平台信息;示例中的 db、ThemeContext 等为示意,需按实际项目替换。