SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场vercel-react-best-practices

vercel-react-best-practices

前端与建站

查看项目

更新于 10-13 13:56

技能介绍

用途

Vercel React Best Practices 是面向 React 与 Next.js 应用的性能优化指南，由 Vercel Engineering 维护。它适用于在编写新的 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查代码中的性能问题、重构既有 React/Next.js 代码、以及优化包体积或加载时间等场景。规则按影响程度分级，可用于指导自动化重构和代码生成。

主要能力（规则分类与优先级）

技能包含 70 条规则，分为 8 个类别，并按优先级排列：

  1. 消除瀑布（CRITICAL，前缀 async-）：包括在 await 标志或远程值前先检查廉价的同步条件、将 await 移入实际使用的分支、对独立操作使用 Promise.all()、使用 better-all 处理部分依赖、在 API 路由中提前启动 promise 并延迟 await、使用 Suspense 流式输出内容。

  2. 包体积优化（CRITICAL，前缀 bundle-）：包括直接导入避免 barrel 文件、优先使用可静态分析的导入与文件系统路径、使用 next/dynamic 处理重型组件、在水合后加载分析/日志、仅在功能激活时加载模块、在 hover/focus 时预加载以提升感知速度。

  3. 服务端性能（HIGH，前缀 server-）：包括像 API 路由一样认证 server actions、使用 React.cache() 做每请求去重、使用 LRU 缓存做跨请求缓存、避免 RSC props 中的重复序列化、将静态 I/O（字体、logo）提升到模块级、避免 RSC/SSR 中模块级可变请求状态、最小化传给客户端组件的数据、重构组件以并行化 fetch、在 Promise.all 中按项链式执行嵌套 fetch、使用 after() 执行非阻塞操作。

  4. 客户端数据获取（MEDIUM-HIGH，前缀 client-）：包括使用 SWR 自动去重请求、去重全局事件监听器、为滚动使用被动监听器、对 localStorage 数据做版本化并最小化。

  5. 重渲染优化（MEDIUM，前缀 rerender-）：包括不订阅仅在回调中使用的状态、将昂贵工作提取到 memo 组件、提升默认非原始类型 props、在 effect 中使用原始类型依赖、订阅派生布尔值而非原始值、在渲染时而非 effect 中派生状态、使用函数式 setState 保持回调稳定、为昂贵值向 useState 传函数做惰性初始化、避免对简单原始值使用 memo、拆分依赖相互独立的 hooks、将交互逻辑放入事件处理器、使用 startTransition 处理非紧急更新、使用 deferred value 延迟昂贵渲染以保持输入响应、使用 refs 存放瞬态高频值、不在组件内定义组件。

  6. 渲染性能（MEDIUM，前缀 rendering-）：包括动画作用于 div 包裹层而非 SVG 元素、对长列表使用 content-visibility、将静态 JSX 提取到组件外部、降低 SVG 坐标精度、对仅客户端数据使用内联脚本避免闪烁、抑制预期内的水合不匹配警告、使用 Activity 组件做显示/隐藏、条件渲染使用三元而非 &&、优先使用 useTransition 处理加载状态、使用 React DOM 资源提示做预加载、在 script 标签上使用 defer 或 async。

  7. JavaScript 性能（LOW-MEDIUM，前缀 js-）：包括通过 class 或 cssText 批量修改 DOM CSS、为重复查找构建 Map、在循环中缓存对象属性访问、在模块级 Map 中缓存函数结果、缓存 localStorage/sessionStorage 读取、将多个 filter/map 合并为一次循环、在昂贵比较前先检查数组长度、从函数中提前返回、将 RegExp 创建提升到循环外、使用循环而非排序求 min/max、使用 Set/Map 做 O(1) 查找、使用 toSorted() 保持不可变性、使用 flatMap 一次完成 map 与 filter、将非关键工作延迟到浏览器空闲时间。

  8. 高级模式（LOW，前缀 advanced-）：包括不将 useEffectEvent 结果放入 effect 依赖、将事件处理器存入 refs、每次应用加载仅初始化一次、使用 useLatest 获得稳定的回调 refs。

使用方式

可阅读单个规则文件获取详细说明与代码示例，例如 rules/async-parallel.md、rules/bundle-barrel-imports.md。每个规则文件包含：为什么重要的简要说明、带有解释的错误代码示例、带有解释的正确代码示例、以及额外的上下文与参考。完整指南（展开全部规则）见 AGENTS.md。

适用场景

适用于 React/Next.js 项目的日常开发、代码审查、性能调优与重构，以及需要为自动化代理提供结构化优化规则的场景。

限制

资料未提供该技能的安装命令、运行环境要求、收费信息或具体平台支持范围，暂未提供相关信息。