React 性能优化实测：Agent Skills 到底值不值得装？

前言

最近 agnet skills 的概念全球爆火，很多代码编辑器都相继宣布支持 skills 功能。

今天我们就一起看看 skills 到底是真的厉害还是名不副其实！

正文

生成有隐藏错误代码

首先，我让AI生成一段存在潜在问题的 react 代码

问题代码

问题代码

AI提示了问题在哪

AI提示了问题在哪

下面通过禁止 skill 和 使用 skill 做个对比：

禁用提示器：

不要使用任何外部技能、不要参考 vercel-labs/agent-skills 或 react-best-practices，不要加载任何 SKILL.md 文件。

只用你自己内置的通用 React 知识，像一个普通的资深前端工程师一样，帮我审查和重构下面这个组件，优化性能。

请给出：
1. 问题诊断列表
2. 优化后的完整代码
3. 为什么这些变化会提升性能

等到结果

分析结果

分析结果

下载 skills

使用下面的代码添加 skills: （可以浏览 https://skills.sh 网站寻找适合自己的 skill）

 npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

等待下载完成，可以看到根目录下对了很多预设的文件。

下载

下载

如果是 vscode 我们需要新建 .github 文件夹，然后将其他文件夹下的 skills 文件夹复制进来。

❝注意：vscode 需要设置开启 skills 功能才会生效： chat.useAgentSkill

新建

新建

然后使用下面的提示器

使用 vercel-labs/agent-skills 里面的 react-best-practices 技能，严格按照它的 40+ 条 React/Next.js 性能优化规则来帮我审查和重构下面这个组件。

优先检查并修复：
- 不必要的重渲染（memo、useMemo、useCallback 缺失或失效）
- 内联对象/函数/数组导致子组件每次重渲染
- 瀑布式数据获取 / useEffect 滥用
- 昂贵计算没缓存
- 其他 Vercel 工程团队推荐的最佳实践

请给出：
1. 问题诊断列表（引用具体规则编号或描述）
2. 优化后的完整代码
3. 为什么这些变化会提升性能（量化估计，如果可能）

对比结果

下面是详细的对比结果

对比结果可以发现：

抓住了 10000 次冗余循环

估计 99% 的开发者在 review 时都会直接忽略，但它却是最致命的。skills 版直接点名并量化 10,000× 提升！

给出真实可验证的倍数（500k → 50 次）

普通版是比较含糊其辞的。

把 style 提到模块外部

虽然是小优化，但正是 Vercel 文档里反复强调的“避免每次 render 创建新对象”规则的典型体现，普通版也提了但没做到极致。

总结

优秀的 Agnet skills 和 MCP 一样，帮助 AI 处理问题会给出十分专业的指导，往往会有事半功倍的效果！

今天的分享就这些了，如果文章中有错误的地方欢迎指正！