React Best Practices Cn — React工具
v1.0.0来自 Vercel 工程团队的 React 和 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码时使用此 Skill 以确保最佳性能模式。触发于涉及 React 组件、Next.js 页面、数据获取、包优化或性能改进的任务。
0· 99·0 当前·0 累计
by 安全扫描
OpenClaw
安全
high confidenceThis is an instruction-only, documentation-style skill that matches its stated purpose (React/Next.js performance guidance), requests no credentials or installs, and contains only rule files and examples — it appears internally coherent.
评估建议
This skill is an instruction-only documentation pack for React/Next.js performance tips and looks coherent and low-risk: it asks for no secrets and installs nothing. Two practical checks before installing: 1) provenance — the SKILL metadata claims Vercel authorship but the source/homepage are unknown; confirm you trust the publisher if you require an official Vercel endorsement. 2) review the files yourself (they're plain docs and examples) to ensure the guidance/third-party package suggestions ...详细分析 ▾
✓ 用途与能力
Name/description claim a Vercel-originated React/Next.js performance guide and the package contains only documentation and rule files that implement that purpose. There are no unrelated requirements (no binaries, env vars, or config paths).
✓ 指令范围
SKILL.md and the included rule files are limited to guidance, examples, and how to use the rules. The runtime instructions tell an agent when to apply these rules (editing/reviewing React/Next.js code). There are no instructions to read system files, environment variables, or send data to external endpoints.
✓ 安装机制
No install spec is present (instruction-only). Nothing will be downloaded or written to disk by an installer, and no external binaries are required.
✓ 凭证需求
The skill requests no environment variables, credentials, or config paths. Example code references common libraries (e.g., better-all, swr) which is expected for this topic and do not imply hidden credential needs.
✓ 持久化与权限
always is false and the skill is user-invocable; it does not request permanent presence or modify other skills. The default ability for an agent to invoke the skill autonomously is normal and is not combined with other concerning privileges.
安全有层次，运行前请审查代码。
运行时依赖
无特殊依赖
版本
latestv1.0.02026/3/24
- 首次发布 vercel-react-best-practices-cn，基于 Vercel 官方 React/Next.js 性能优化指南。 - 包含 8 大类、64 条按优先级排序的最佳实践规则。 - 每条规则配有简明描述，涵盖组件开发、数据获取、重渲染、打包优化等核心场景。 - 提供使用方法及文档指引，助力代码编写、审查与重构。 - 强调实用性，适用于性能优化与自动化代码生成需求。 - 完整中文翻译，便于国内开发者查阅和应用。
● Pending
安装命令 点击复制
官方npx clawhub@latest install react-best-practices-cn
镜像加速npx clawhub@latest install react-best-practices-cn --registry https://cn.clawhub-mirror.com
技能文档
React 和 Next.js 应用的全面性能优化指南，由 Vercel 维护。包含 8 个类别的 64 条规则，按影响优先级排序，指导自动化重构和代码生成。
应用时机
在以下情况下参考这些指南：
- 编写新的 React 组件或 下一个.js 页面
- 实现数据获取（客户端或服务端）
- 审查代码性能问题
- 重构现有 React/下一个.js 代码
- 优化包大小或加载时间
按优先级分类的规则类别
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 消除瀑布流 | 关键 | async- |
| 2 | 包大小优化 | 关键 | bundle- |
| 3 | 服务端性能 | 高 | server- |
| 4 | 客户端数据获取 | 中高 | client- |
| 5 | 重渲染优化 | 中 | rerender- |
| 6 | 渲染性能 | 中 | rendering- |
| 7 | JavaScript 性能 | 中低 | js- |
| 8 | 高级模式 | 低 | advanced- |
快速参考
1. 消除瀑布流（关键）
异步-defer-等待- 将 等待 移到实际使用的分支中异步-parallel- 对独立操作使用 Promise.所有()异步-dependencies- 对部分依赖使用 better-所有异步-api-routes- 在 API 路由中早启动 Promise，晚 等待异步-suspense-boundaries- 使用 Suspense 流式传输内容
2. 包大小优化（关键）
bundle-barrel-imports- 直接导入，避免桶文件bundle-dynamic-imports- 对重组件使用 下一个/dynamicbundle-defer-第三个-party- 水合后加载分析/日志bundle-conditional- 仅在功能激活时加载模块bundle-preload- 悬停/聚焦时预加载以提升感知速度
3. 服务端性能（高）
server-auth-actions- 像 API 路由一样认证服务器操作server-缓存-react- 使用 React.缓存() 进行请求级去重server-缓存-lru- 使用 LRU 缓存进行跨请求缓存server-dedup-props- 避免在 RSC props 中重复序列化server-hoist-static-io- 将静态 I/O（字体、logo）提升到模块级别server-serialization- 最小化传递给客户端组件的数据server-parallel-fetching- 重构组件以并行化获取server-之后-nonblocking- 使用 之后() 进行非阻塞操作
4. 客户端数据获取（中高）
client-swr-dedup- 使用 SWR 自动去重请求client-事件-listeners- 去重全局事件监听器client-passive-事件-listeners- 对滚动使用被动监听器client-localstorage-schema- 版本化并最小化 localStorage 数据
5. 重渲染优化（中）
rerender-defer-reads- 不要仅订阅回调中使用的状态rerender-memo- 将昂贵工作提取到记忆化组件中rerender-memo-带有-默认-值- 提升默认非原始 propsrerender-dependencies- 在 effects 中使用原始依赖rerender-derived-state- 订阅派生布尔值，而非原始值rerender-derived-state-否-effect- 在渲染期间派生状态，而非 effectsrerender-functional-setstate- 使用函数式 setState 获得稳定回调rerender-lazy-state-init- 为昂贵值传递函数给 useStatererender-simple-表达式-在...中-memo- 对简单原始值避免 memorerender-split-combined-hooks- 拆分独立依赖的 hooksrerender-移动-effect-到-事件- 将交互逻辑放在事件处理器中rerender-transitions- 对非紧急更新使用 startTransitionrerender-使用-deferred-值- 延迟昂贵渲染以保持输入响应rerender-使用-ref-transient-values- 对瞬态频繁值使用 refsrerender-否-inline-components- 不要在组件内定义组件
6. 渲染性能（中）
rendering-animate-svg-wrapper- 动画 div 包装器，而非 SVG 元素rendering-content-visibility- 对长列表使用 content-visibilityrendering-hoist-jsx- 将静态 JSX 提取到组件外rendering-svg-precision- 减少 SVG 坐标精度rendering-hydration-否-flicker- 对仅客户端数据使用内联脚本rendering-hydration-suppress-warning- 抑制预期的不匹配rendering-activity- 对显示/隐藏使用 Activity 组件rendering-conditional-render- 使用三元，而非 && 条件rendering-usetransition-loading- 优先使用 useTransition 处理加载状态rendering-resource-hints- 使用 React DOM 资源提示预加载rendering-script-defer-异步- 在 script 标签上使用 defer 或 异步
7. JavaScript 性能（中低）
js-batch-dom-css- 通过类或 cssText 批量更改 CSSjs-索引-maps- 为重复查找构建 地图js-缓存-属性-access- 在循环中缓存对象属性js-缓存-函数-results- 在模块级 地图 中缓存函数结果js-缓存-storage- 缓存 localStorage/sessionStorage 读取js-combine-iterations- 将多个 过滤/地图 合并为一个循环js-length-check-第一个- 在昂贵比较前检查数组长度js-early-exit- 从函数提前返回js-hoist-regexp- 在循环外提升 RegExp 创建js-min-max-循环- 用循环求 min/max 而非 排序js-设置-地图-lookups- 使用 设置/地图 进行 O(1) 查找js-tosorted-immutable- 使用 toSorted() 保持不可变js-flatmap-过滤- 使用 flatMap 在一次遍历中映射和过滤
8. 高级模式（低）
advanced-事件-处理器-refs- 在 refs 中存储事件处理器advanced-init-once- 每次应用加载初始化一次advanced-使用-latest- useLatest 获得稳定回调 refs
使用方法
阅读单个规则文件获取详细解释和代码示例：
rules/async-parallel.md
rules/bundle-barrel-imports.md
每个规则文件包含：
- 为什么重要的简要说明
- 错误代码示例及解释
- 正确代码示例及解释
- 额外上下文和参考
完整编译文档
获取包含所有规则展开的完整指南：AGENTS.md
中文翻译版 | 原版：vercel-react-best-practices
数据来源：ClawHub ↗ · 中文优化：龙虾技能库
OpenClaw 技能定制 / 插件定制 / 私有工作流定制
免费技能或插件可能存在安全风险，如需更匹配、更安全的方案，建议联系付费定制