用途:使用 React 19+ 特性构建现代、高性能的 React Web 应用,覆盖组件编写、数据获取、表单处理与性能优化。
主要能力:
- 函数组件与 TypeScript:以接口定义 props,如 variant、children、onClick 等。
- Server Components:React 19 默认在服务端渲染,减少客户端 JavaScript,可直接在组件内 await 数据查询。
- Client Components:用 'use client' 标记交互组件,配合 useState 等 Hook。
- Actions 与 useActionState:替代手动表单处理,返回状态并暴露 pending。
- use() Hook:读取 Promise 与 Context,Promise 未完成时挂起。
- useOptimistic:实现即时乐观 UI 更新。
- useFormStatus:从 react-dom 读取表单提交状态。
- 项目结构建议:app、components(ui/features/layouts)、hooks、lib、types、styles。
- 自定义 Hook 模式:如 useAsync 封装 loading、data、error。
- 性能指南:依赖 React Compiler 自动记忆化,避免不必要的 useMemo/useCallback;默认服务端渲染,仅在需要交互时加 'use client';用 React.lazy() 与 Suspense 做路由懒加载与代码分割;避免 prop drilling,改用 Context 或组合模式。
使用方式:按上述模式编写组件与 Hook;表单使用 action 属性配合 useActionState 或 useFormStatus;数据获取优先放在 Server Component 中。
适用场景:需要 React 19+ 新特性、服务端渲染、表单 Actions 与乐观更新的 Web 项目。
限制:资料未提供安装命令、依赖版本、收费与平台信息;示例中的 db、ThemeContext 等为示意,需按实际项目替换。