技能 rn-performance
📦
rn-performance
內容修訂 r1 安全 ⚙️ 外部命令
最佳化 React Native 效能
React Native 應用程式可能會遇到清單緩慢、額外渲染和 JS 執行緒停滯等問題。這項技能提供專注於更快的 FlatList 畫面、記憶化元件、最佳化 selector、快取圖片和效能分析的模式。
支援: Claude Codex Code(CC)
使用我的智慧代理安裝
將此請求複製給你的智慧代理，其中包含權威 Skill 頁面和清單。
智能體請求
Review the Skillstore skill "rn-performance" from https://skillstore.io/skills/cjharmath-rn-performance.md and its manifest at https://skillstore.io/api/skills/cjharmath-rn-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.你的智慧代理仍應顯示其計畫，並依安全政策請求必要確認。
Agent 可讀資源
當 AI Agent、爬蟲或腳本需要乾淨脈絡、而不是讀取完整頁面時，請使用這些連結。
測試它
正在使用「rn-performance」。 球員名錄畫面在捲動數百列時會卡頓。
預期結果:
- 使用基於球員 ID 的穩定項目 key。
- 將列項目渲染移到記憶化的項目元件中。
- 如果列高固定，加入 getItemLayout。
- 如果效能分析仍顯示清單瓶頸，考慮使用 FlashList。
正在使用「rn-performance」。 當一個 Zustand 值變更時，儀表板會重新渲染每張卡片。
預期結果:
- 避免在儀表板中選取整個 store。
- 為每張卡片的值使用特定 selector。
- 當元件需要多個相關值時，使用 shallow comparison。
- 再次進行效能分析，確認只有變更的卡片會渲染。
正在使用「rn-performance」。 畫面在導覽後計算排名時會短暫凍結。
預期結果:
- 在導覽期間分析 JS 執行緒。
- 將繁重工作延後到互動完成後執行。
- 在排名輸入會被重複使用時進行記憶化。
- 將長時間執行的計算移出初始渲染路徑。
安全審計
安全v7 • 2026/7/6 開啟版本化報告
All static findings were adjudicated as false positives. The detections come from Markdown fences, inline backticks, TypeScript examples, and a React.memo prop comparison in a documentation-only skill. No prompt injection, external command execution, network access, filesystem access, or data exfiltration intent was found in SKILL.md.
1
已掃描檔案
423
分析行數
0
複核項目
0
已忽略的誤報
風險因素
⚙️ 外部命令 (40)
SKILL.md:18-36 SKILL.md:36-37 SKILL.md:37-41 SKILL.md:41-59 SKILL.md:59-61 SKILL.md:61-65 SKILL.md:65-83 SKILL.md:83-99 SKILL.md:99-103 SKILL.md:103-120 SKILL.md:120-128 SKILL.md:128-137 SKILL.md:137-147 SKILL.md:147-163 SKILL.md:163-172 SKILL.md:172-185 SKILL.md:185-196 SKILL.md:196-223 SKILL.md:223-241 SKILL.md:241-260 SKILL.md:260-262 SKILL.md:262-268 SKILL.md:268-286 SKILL.md:286-294 SKILL.md:294-312 SKILL.md:312-316 SKILL.md:316-325 SKILL.md:325-341 SKILL.md:341-354 SKILL.md:354-358 SKILL.md:358-364 SKILL.md:364-372 SKILL.md:372-388 SKILL.md:388-396 SKILL.md:396-397 SKILL.md:397-398 SKILL.md:398-399 SKILL.md:399-401 SKILL.md:401-411 SKILL.md:411-413
最近一次完成的靜態與語意稽核未偵測到已確認的安全發現。這並不能證明該 Skill 沒有副作用。
審計單位: codex 檢視審計紀錄 →
分享與引用此報告
分享版本化評估報告、中性徽章、嵌入卡片與引用。Skillstore 只報告證據，不判斷該 Skill 是否安全。
複製報告連結
https://skillstore.io/skills/cjharmath-rn-performance/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 徽章
[](https://skillstore.io/skills/cjharmath-rn-performance?utm_source=security_passport_badge)HTML 徽章
<a href="https://skillstore.io/skills/cjharmath-rn-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-rn-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a>嵌入卡片
<iframe src="https://skillstore.io/embed/skills/cjharmath-rn-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>學術引用 (APA · BibTeX · CFF)
APA 引用
CJHarmath. (2026). rn-performance security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-rn-performance/audits/7BibTeX 引用
@techreport{cjharmath-cjharmath-rn-performance-2026,
author = {CJHarmath},
title = {rn-performance security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-rn-performance/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "rn-performance security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-rn-performance/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-rn-performance:audit:7"
description: "Skillstore immutable audit report identifier"
Skillstore 評分
評分依據 證據置信度: 高 55
架構
85
可維護性
87
內容
71
社群
91
規範符合度
你可以打造什麼
修復卡頓的清單畫面
診斷緩慢的 FlatList 畫面，並套用穩定 key、項目版面配置、記憶化列項目和渲染視窗設定。
審查發布效能
在發布前檢查大量清單畫面中的可避免渲染、昂貴 selector、圖片快取問題和 JS 執行緒阻塞。
教導渲染衛生習慣
使用範例說明記憶化何時有幫助、何時會增加額外負擔，以及如何分析渲染行為。
試試這些提示
找出簡單清單問題
Review this React Native list screen for obvious performance issues. Focus on stable keys, renderItem, getItemLayout, and inline callbacks.
減少重新渲染
Analyze these components for unnecessary re-renders. Recommend where React.memo, useMemo, useCallback, or StyleSheet.create would help.
最佳化狀態 Selector
Review this Zustand usage for selector problems. Suggest focused selectors, shallow comparison, and safer component boundaries.
規劃效能改善
Create a prioritized performance plan for this React Native feature. Include profiling steps, list changes, image handling, memoization, and JS thread risks.
最佳實務
- 先進行效能分析，再最佳化實際造成延遲的元件或清單。
- 先使用穩定的 props 和 selector，再加入廣泛的記憶化。
- 在真實裝置上驗證改善效果，尤其是較低階的 Android 硬體。
避免
- 不要在未衡量成本的情況下記憶化每個簡單值。
- 不要將 inline 物件或 callback 傳入記憶化的子元件。
- 當元件只需要一個值時，不要選取整個 Zustand store。
常見問題
這項技能會自動變更我的應用程式程式碼嗎？
不會。它提供審查指引和範例，助理可在你核准後套用。
我應該何時使用 FlashList 而不是 FlatList？
對於非常大型的清單、複雜列項目，或已最佳化的 FlatList 畫面仍出現捲動卡頓的情況，可以考慮使用 FlashList。
這能協助 Expo 應用程式嗎？
可以。範例包含適合 Expo 的指引，例如 expo-image 快取和 React Native 效能分析工作流程。
React.memo 一定會改善效能嗎？
不會。它在 props 穩定且渲染成本昂貴時有幫助，但對簡單元件可能會增加額外負擔。
我應該如何驗證最佳化是否有效？
在每次變更前後，使用 React DevTools Profiler、針對性的渲染記錄和裝置測試。
Claude、Codex 或 Claude Code 可以使用這項技能嗎？
可以。報告標示支援 Claude、Codex 和 Claude Code。