技能 react-native-best-practices

📦

react-native-best-practices

Name: react-native-best-practices
Author: callstackincubator

内容修订 r1 安全 📁 文件系统访问🔑 环境变量⚡ 包含脚本⚙️ 外部命令🌐 网络访问

优化 React Native 应用性能

React Native 应用可能会出现启动缓慢、丢帧、过度重新渲染、内存持续增长以及包体积过大等问题。此技能指导用户在 JavaScript、iOS、Android、Hermes 和 Expo 环境中进行性能测量、问题诊断、针对性优化和效果验证。

支持: Claude Codex Code(CC)

🥉 77 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "react-native-best-practices" from https://skillstore.io/skills/callstackincubator-react-native-best-practices.md and its manifest at https://skillstore.io/api/skills/callstackincubator-react-native-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/callstackincubator-react-native-best-practices.md 已签名 manifest GET /api/skills/callstackincubator-react-native-best-practices/manifest 已签名 lockfile GET /api/skills/callstackincubator-react-native-best-practices/lockfile

测试它

正在使用“react-native-best-practices”。产品列表在滚动时降至 42 FPS。

预期结果:

发现：渲染分析显示列表项在滚动过程中反复更新。
建议：保持列表项属性稳定，并使用合适的虚拟化列表。
验证：重复执行该交互，并比较帧率和重新渲染次数。

正在使用“react-native-best-practices”。使用 Hermes 的 Android 应用冷启动耗时 3.4 秒。

预期结果:

发现：启动标记将原生初始化、包加载和首次有意义渲染区分开来。
建议：在添加推测性预加载之前，先处理测得耗时最长的阶段。
验证：在同一台发布设备上比较多次冷启动结果。

正在使用“react-native-best-practices”。添加多个库后，发布版应用的体积增大了。

预期结果:

发现：包和应用体积报告可识别新增 JavaScript、原生代码和资源中占用空间最大的部分。
建议：移除未使用的导入、比较替代依赖项，并检查 R8 和资源设置。
验证：重新构建相同的发布变体，并比较下载体积和安装体积。

安全审计

安全

v6 • 2026/7/12 打开版本化报告

全部 191 条静态告警均为由 Markdown、固定路径示例、常规 React Native 工具命令、公开链接和性能术语导致的误报。未发现提示注入、凭据窃取、隐蔽侦察、恶意代码执行或数据外泄意图。

已扫描文件

6,483

分析行数

复核项

已忽略误报

风险因素

📁 文件系统访问 (15)

POWER.md:63 POWER.md:142 references/bundle-barrel-exports.md:221 references/bundle-code-splitting.md:214 references/bundle-code-splitting.md:221 references/bundle-hermes-mmap.md:4 references/bundle-hermes-mmap.md:35 references/bundle-hermes-mmap.md:135 references/native-android-16kb-alignment.md:81 references/native-android-16kb-alignment.md:84 references/native-measure-tti.md:221 references/native-platform-setup.md:112 SKILL.md:129 SKILL.md:187 SKILL.md:234

🔑 环境变量 (2)

references/bundle-analyze-js.md:160 references/bundle-analyze-js.md:160

⚡ 包含脚本 (6)

references/bundle-code-splitting.md:23 references/bundle-code-splitting.md:72 references/bundle-code-splitting.md:74 references/bundle-code-splitting.md:164 references/bundle-code-splitting.md:194 references/bundle-tree-shaking.md:208

⚙️ 外部命令 (26)

🌐 网络访问 (3)

references/bundle-library-size.md:15 references/bundle-library-size.md:104 SKILL.md:83

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/callstackincubator-react-native-best-practices/security.svg)](https://skillstore.io/skills/callstackincubator-react-native-best-practices?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/callstackincubator-react-native-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/callstackincubator-react-native-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/callstackincubator-react-native-best-practices.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 引用

callstackincubator. (2026). react-native-best-practices security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6

BibTeX 引用

@techreport{callstackincubator-callstackincubator-react-native-best-practices-2026,
  author = {callstackincubator},
  title = {react-native-best-practices security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6},
  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: "react-native-best-practices security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "callstackincubator"
date-released: "2026-07-12"
url: "https://skillstore.io/skills/callstackincubator-react-native-best-practices/audits/6"
identifiers:
  - type: other
    value: "skillstore:callstackincubator-react-native-best-practices:audit:6"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 高

架构

可维护性

内容

社区

规范符合性

你能构建什么

修复运行缓慢的屏幕

分析卡顿的交互，识别重新渲染或列表瓶颈，并验证针对性的更改。

降低启动和包体积成本

测量冷启动时间和包体积，然后确定 Hermes、打包、资源和原生优化的优先级。

审查性能回归

比较不同版本的证据，并生成包含验证标准且按优先级排序的修复计划。

试试这些提示

审查屏幕

审查此 React Native 屏幕是否存在明显的性能风险。使用所提供的代码和项目版本。确定三项更改的优先级，并说明如何测量每项更改的效果。

诊断丢帧

诊断 [interaction] 期间的丢帧问题。使用以下性能分析结果：[metrics]。识别可能的原因、请求缺失的证据，并提出“测量-更改-重新测量”的流程。

优化启动和包体积

为此使用 [Hermes or JSC] 的 React Native [version] 应用制定启动和包体积优化计划。比较基准指标，并按影响和风险对更改进行排序。

调查性能回归

从 JavaScript、原生线程、内存和包交付等方面调查此性能回归。关联 [trace]、[render profile] 和 [build data]。建议最小化的修复方案，并提供验证和回滚标准。

最佳实践

在更改代码之前记录可重复的基准数据，然后在每次更改后重复相同的交互。
在应用特定版本的指导之前，确认 React Native 和相关库的版本。
执行前审查本地命令和依赖项更改，尤其是发布版本构建命令和第三方性能分析工具。

避免

在没有重新渲染或帧率测量证据的情况下，不要建议使用记忆化、重写状态逻辑或更改编译器。
不要同时应用所有优化，因为这样会难以确定各项优化的效果，也会增加隔离性能回归的难度。
不要从用户控制或不受信任的来源加载远程 JavaScript 分块。

常见问题

此技能涵盖哪些性能领域？

它涵盖帧率、重新渲染、启动时间、包、应用体积、内存、动画、列表、TextInput、原生模块和线程。

它支持 Expo 项目吗？

支持。它包含 Expo 特有的包分析、tree-shaking、prebuild 和性能分析指导，前提是项目版本支持这些工作流。

它会自动修改我的项目吗？

不会。它会建议针对性的更改和命令。请审查每项更改，并通过常规开发工作流执行。

我应该提供哪些测量数据？

请提供可重复的交互、设备详细信息、构建类型、项目版本、基准指标、性能分析器输出以及近期相关更改。

它能诊断原生性能问题吗？

可以。它涵盖 Xcode Instruments、Android Studio Profiler、原生线程、内存所有权、Turbo Modules、视图层级和对齐。

是否建议使用远程分块来减小包体积？

仅建议用于现有或明确采用远程代码的架构。请使用第一方签名产物、可信的 HTTPS 来源、固定清单和严格验证。

开发者详情

作者

callstackincubator

许可证

MIT

Skillstore 修订

版本提示

作者未声明版本。

仓库

https://github.com/callstackincubator/agent-skills/tree/main/skills/react-native-best-practices/

引用

d71c7417a35d5c2624161bd2fe8de8a41a362128

维护新鲜度

2026/7/18

使用量

4 次下载 · 209 次浏览

文件结构

📁 agents/

📄 openai.yaml

📄 POWER.md

📁 references/

📄 bundle-analyze-app.md

📄 bundle-analyze-js.md

📄 bundle-barrel-exports.md

📄 bundle-code-splitting.md

📄 bundle-hermes-mmap.md

📄 bundle-library-size.md

📄 bundle-native-assets.md

📄 bundle-r8-android.md

📄 bundle-tree-shaking.md

📁 images/

📄 bundle-treemap-source-map-explorer.png

📄 controlled-textinput-pingpong.png

📄 devtools-flamegraph.png

📄 emerge-xray-ios.png

📄 expo-atlas-treemap.png

📄 flashlight-flatlist-vs-flashlist.png

📄 fps-drop-graph.png

📄 memory-heap-snapshot.png

📄 tti-warm-start-diagram.png

📄 view-hierarchy-flattening.png

📄 xcode-instruments-templates.png

📄 xcode-thread-view.png

📄 js-animations-reanimated.md

📄 js-atomic-state.md

📄 js-bottomsheet.md

📄 js-concurrent-react.md

📄 js-lists-flatlist-flashlist.md

📄 js-measure-fps.md

📄 js-memory-leaks.md

📄 js-profile-react.md

📄 js-react-compiler.md

📄 js-uncontrolled-components.md

📄 native-android-16kb-alignment.md

📄 native-measure-tti.md

📄 native-memory-leaks.md

📄 native-memory-patterns.md

📄 native-platform-setup.md

📄 native-profiling.md

📄 native-sdks-over-polyfills.md

📄 native-threading-model.md

📄 native-turbo-modules.md

📄 native-view-flattening.md

📄 SKILL.md