SuperAPI AI 工具集

loom-react

前端与建站

查看项目

更新于 10-15 20:28

技能介绍

用途:loom-react 提供构建 React 19+ 客户端 SPA 的实践模式,覆盖组件、Hooks、Jotai 原子状态、React Router v7 路由与数据加载等。明确不适用于 SSR 框架(Next.js/Remix),属于范围之外。

主要能力:介绍 React 19 的 Actions 与 useActionState、useOptimistic 乐观更新、use() 读取 Promise 与 Context、文档元数据自动提升到 head;说明纯 SPA 中所有组件都是客户端组件,无服务端组件概念。UI 模式包括基于 class-variance-authority 的设计系统组件、Card 组合式插槽、多态组件、render props。路由部分涵盖 createBrowserRouter、loader 数据加载、Outlet 布局、useNavigate/useSearchParams/useNavigation/useParams、受保护路由。状态部分强调原子必须定义在模块作用域,使用 atomFamily 处理按 id 的原子,并区分 useAtom/useAtomValue/useSetAtom。

使用方式:以 Bun 与 Vite 初始化项目,命令为 bun create vite my-app --template react-ts、bun install、bun add react-router jotai、bun add -D @types/react @types/react-dom、bun run dev。资料还给出 vite.config.ts 与 tsconfig.json 配置示例,以及 react-router typegen && tsc 的类型生成流程。

适用场景:需要客户端渲染的 React 19 SPA,尤其是使用 React Router v7 与 Jotai 的项目。

限制:不覆盖 SSR 框架;use() 的 Promise 必须在渲染周期外创建,否则会反复挂起与请求;原子不可在组件内创建。资料未提供收费、价格、平台或效果等信息。