React Native 性能调优助手 Skill 技能

技能简介

cjharmath-rn-performance 是 Skillstore 上专门面向 React Native 应用的性能调优技能。它针对移动端常见的列表卡顿、组件多余渲染、JS 线程阻塞、图片缓存失效等问题，给出可落地的排查路径和优化方案。技能由 CJHarmath 维护，已通过 Skillstore 完整审计，qualityScore 79，支持 Claude、Codex、Claude Code 三类 Agent 调用。

核心能力

• 指导 FlatList 的 keyExtractor、renderItem、getItemLayout 等关键参数稳定化配置
• 在大型或复杂列表场景下评估是否升级到 FlashList，并给出选型判断
• 通过 useMemo、useCallback、React.memo 的精准使用减少组件不必要重渲染
• 优化 Zustand 选择器写法，使用精细化 selector 与 shallow 对比
• 引入 expo-image 缓存、render detection 与 JS 线程任务延后策略
• 提供卡顿、慢渲染、内存增长、UI 冻结的诊断 checklist
• 指导低性能硬件（尤其是低端 Android）上的真机验证流程

安装配置

• 通过 Skillstore CLI 一键安装：npx skillstore add CJHarmath/rn-performance
• 支持 Claude、Codex、Claude Code 三个 Agent，无需额外权限
• 依赖仓库：https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-performance
• 风险因素 external_commands 已在 Skillstore 安全审计中评估为 false positive
• 安装后无需重启项目，直接在 Agent 对话中引用技能名即可触发

使用步骤

1. 在 Agent 对话中加载 cjharmath-rn-performance 技能
2. 提供存在性能问题的 React Native 屏幕或组件代码片段
3. 让 Agent 按 checklist 顺序排查：稳定 keys → renderItem → getItemLayout → inline 回调 → 组件拆分
4. 对发现的高开销渲染路径，建议加入 useMemo/useCallback/React.memo 等优化
5. 对状态管理组件，调用 Zustand selector 优化模板并做 shallow 对比验证
6. 图片资源改用 expo-image 并配置缓存、placeholder、过渡时长
7. 在低端真机上用 React DevTools Profiler 验证优化效果

适用场景

• 修复电商、社交、新闻类信息流的 FlatList 卡顿与掉帧
• 重构旧 React Native 项目时系统性排查性能债务
• 评估是否需要迁移到 FlashList 以应对大数据量列表
• 优化 Zustand 全局状态引起的连锁渲染
• 图片列表加载慢、白屏、闪烁问题的归因与修复
• 上线前对 RN 模块做一次性能 review 与真机回归

适用人群

• 移动端 React Native 开发工程师
• 跨端架构师与性能 owner
• 负责 RN 项目性能基线与回归测试的 Tech Lead
• 正在从 Web React 转入 React Native 的工程师

工作原理

技能通过预置的 prompt 模板与 checklist，引导 Agent 对 RN 代码做按层级的性能诊断：列表层（key/布局/虚拟化）、渲染层（memo 与 state 隔离）、状态层（Zustand selector）、资源层（图片缓存与 JS 线程占用），最终输出可执行的优化建议与真机验证方法。所有模板均经过 Skillstore 静态扫描与人工复核，无 prompt 注入风险。

官方链接

• Skillstore 页面：https://skillstore.io/skills/cjharmath-rn-performance
• GitHub 仓库：https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/rn-performance
• Manifest：https://skillstore.io/api/skills/cjharmath-rn-performance/manifest
• 安装命令：npx skillstore add CJHarmath/rn-performance