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

react-best-practices

编程与开发

查看项目

更新于 10-15 14:10

技能介绍

用途

本技能是一份面向 React 与 Next.js 应用的性能优化指南，由 Vercel Engineering 维护，包含 8 个类别共 70 条规则，按影响程度排序，用于指导自动重构与代码生成。

在以下场景中可参考这些准则：编写新的 React 组件或 Next.js 页面；实现数据获取（客户端或服务端）；审查代码中的性能问题；重构现有 React/Next.js 代码；优化包体积或加载时间。

版本兼容性

不同规则对框架版本有最低要求：

  • 核心性能规则（async、bundle、js）：React 18 + Next.js 14
  • React.cache()（server-cache-react）：React 19
  • <Activity>（rendering-activity）：React 19.2
  • useEffectEvent（advanced-effect-event-deps、advanced-use-latest、advanced-event-handler-refs）：React 19.2
  • after()（server-after-nonblocking）：Next.js 15.1
  • use()、异步过渡、资源提示（async-suspense-boundaries、rendering-usetransition-loading、rendering-resource-hints）：React 19
  • React Compiler（影响 rerender-* 规则）：React 17/18/19；更早版本需要匹配的 target 与 runtime
  • use cache 指令（参见 cache-components 技能）：Next.js 16

规则类别与优先级

  1. 消除瀑布请求（CRITICAL，前缀 async-）
  2. 包体积优化（CRITICAL，前缀 bundle-）
  3. 服务端性能（HIGH，前缀 server-）
  4. 客户端数据获取（MEDIUM-HIGH，前缀 client-）
  5. 重渲染优化（MEDIUM，前缀 rerender-）
  6. 渲染性能（MEDIUM，前缀 rendering-）
  7. JavaScript 性能（LOW-MEDIUM，前缀 js-）
  8. 高级模式（LOW，前缀 advanced-）

应用低层级 JavaScript 规则前应先做性能分析。它们是经过测量的热路径候选，而非重写清晰代码的检查清单。启用 React Compiler 时，在添加手动记忆化之前先检查其覆盖范围。

规则速查

1. 消除瀑布请求（CRITICAL）

  • async-cheap-condition-before-await：在 await 标志或远程值之前先检查廉价的同步条件
  • async-defer-await：将 await 移入实际使用它的分支
  • async-parallel：对独立操作使用 Promise.all()
  • async-dependencies：对部分依赖使用 better-all
  • async-api-routes：在 API 路由中尽早启动 Promise，延迟 await
  • async-suspense-boundaries：使用 Suspense 流式传输内容

2. 包体积优化（CRITICAL）

  • bundle-barrel-imports：直接导入，避免 barrel 文件
  • bundle-analyzable-paths：优先使用可静态分析的导入与文件系统路径，避免过宽的打包与追踪
  • bundle-dynamic-imports：对重型组件使用 next/dynamic
  • bundle-defer-third-party：在水合之后加载分析/日志
  • bundle-conditional：仅在功能激活时加载模块
  • bundle-preload：在悬停/聚焦时预加载以提升感知速度

3. 服务端性能（HIGH）

  • server-auth-actions：像 API 路由一样对服务端操作进行身份验证
  • server-cache-react：使用 React.cache() 进行每请求去重
  • server-cache-lru：使用 LRU 缓存进行跨请求缓存
  • server-dedup-props：避免 RSC props 中的重复序列化
  • server-hoist-static-io：将静态 I/O（字体、logo）提升到模块级别
  • server-no-shared-module-state：避免 RSC/SSR 中的模块级可变请求状态
  • server-serialization：最小化传递给客户端组件的数据
  • server-parallel-fetching：重构组件以并行化获取
  • server-parallel-nested-fetching：在 Promise.all 中按项链接嵌套获取
  • server-after-nonblocking：使用 after() 进行非阻塞操作

4. 客户端数据获取（MEDIUM-HIGH）

  • client-swr-dedup：使用 SWR 进行自动请求去重
  • client-event-listeners：去重全局事件监听器
  • client-passive-event-listeners：对滚动使用被动监听器
  • client-localstorage-schema：对 localStorage 数据进行版本化并最小化

5. 重渲染优化（MEDIUM）

  • rerender-defer-reads：不要订阅仅在回调中使用的状态
  • rerender-memo：将昂贵工作提取到记忆化组件中
  • rerender-memo-with-default-value：提升默认的非原始类型 props
  • rerender-dependencies：在 effect 中使用原始类型依赖
  • rerender-derived-state：订阅派生的布尔值，而非原始值
  • rerender-derived-state-no-effect：在渲染期间派生状态，而非在 effect 中
  • rerender-functional-setstate：使用函数式 setState 以获得稳定回调
  • rerender-lazy-state-init：对昂贵值向 useState 传递函数
  • rerender-simple-expression-in-memo：避免对简单原始类型使用 memo
  • rerender-split-combined-hooks：拆分具有独立依赖的 hook
  • rerender-move-effect-to-event：将交互逻辑放入事件处理器
  • rerender-transitions：对非紧急更新使用 startTransition
  • rerender-use-deferred-value：延迟昂贵渲染以保持输入响应
  • rerender-use-ref-transient-values：对瞬态频繁值使用 ref
  • rerender-no-inline-components：不要在组件内部定义组件

6. 渲染性能（MEDIUM）

  • rendering-animate-svg-wrapper：动画作用于 div 包装器，而非 SVG 元素
  • rendering-content-visibility：对长列表使用 content-visibility
  • rendering-hoist-jsx：将静态 JSX 提取到组件外部
  • rendering-svg-precision：降低 SVG 坐标精度
  • rendering-hydration-no-flicker：对仅客户端数据使用内联脚本
  • rendering-hydration-suppress-warning：抑制预期的不匹配
  • rendering-activity：使用 Activity 组件进行显示/隐藏
  • rendering-conditional-render：条件渲染使用三元表达式，而非 &&
  • rendering-usetransition-loading：加载状态优先使用 useTransition
  • rendering-resource-hints：使用 React DOM 资源提示进行预加载
  • rendering-script-defer-async：在 script 标签上使用 defer 或 async

7. JavaScript 性能（LOW-MEDIUM）

  • js-batch-dom-css：通过类或 cssText 分组 CSS 更改
  • js-index-maps：为重复查找构建 Map
  • js-cache-property-access：在循环中缓存对象属性
  • js-cache-function-results：在模块级 Map 中缓存函数结果
  • js-cache-storage：缓存 localStorage/sessionStorage 读取
  • js-combine-iterations：将多个 filter/map 合并为一个循环
  • js-length-check-first：在昂贵比较之前先检查数组长度
  • js-early-exit：从函数中提前返回
  • js-hoist-regexp：将 RegExp 创建提升到循环外部
  • js-min-max-loop：使用循环求最小/最大值，而非排序
  • js-set-map-lookups：使用 Set/Map 进行 O(1) 查找
  • js-tosorted-immutable：使用 toSorted() 实现不可变性
  • js-flatmap-filter：使用 flatMap 在一次遍历中完成映射与过滤
  • js-request-idle-callback：将非关键工作延迟到浏览器空闲时间

8. 高级模式（LOW）

  • advanced-effect-event-deps：不要将 useEffectEvent 结果放入 effect 依赖
  • advanced-event-handler-refs：将事件处理器存储在 ref 中
  • advanced-init-once：每次应用加载仅初始化一次
  • advanced-use-latest：使用 useLatest 获得稳定的回调 ref

使用方式

阅读单个规则文件以获取详细说明与代码示例，例如：

  • rules/async-parallel.md
  • rules/bundle-barrel-imports.md

每个规则文件包含：为何重要的简要说明；带说明的错误代码示例；带说明的正确代码示例；附加上下文与参考。

完整编译文档：包含所有规则展开的完整指南见 AGENTS.md。