用途
本技能专注于优化 React Native 0.83+ 与 Expo SDK 54+ 应用的生产环境性能，覆盖 Hermes V1、React 19.2 并发特性、Intersection Observer API、Web Performance API 以及现代优化策略。当应用出现运行缓慢、内存泄漏、帧率（FPS）问题、启动慢或包体积过大时，可使用本技能进行诊断与优化。
主要能力
React Native 0.83 性能特性
- Hermes V1（实验性）：下一代 JavaScript 引擎，改进垃圾回收、提升启动性能、增强 DevTools 调试。可在 metro.config.js 中通过
hermesParser: true启用。 - React 19.2 并发特性：Activity 组件用于隐藏时保留状态，useEffectEvent 提供稳定事件处理器，改进并发渲染与过渡期间的内存管理。
- Intersection Observer API（Canary）：类似 Web 的懒加载，无需滚动事件即可检测可见性。
- Web Performance API（稳定）：performance.now() 精确计时、User Timing API 自定义标记、PerformanceObserver 监控。
包体积优化
- 使用
npx expo export --dump-sourcemap生成包统计，配合 source-map-explorer 分析。 - 使用 depcheck 移除未使用依赖，启用代码压缩与混淆、tree shaking、懒加载重型屏幕、优化资源尺寸，并用 expo-image 替代 react-native-fast-image。
渲染性能
- React.memo 组件优化（含自定义比较函数）。
- useMemo 与 useCallback 缓存计算结果与稳定回调引用。
- 避免内联函数与对象，使用 StyleSheet.create 复用样式。
列表性能
- 优化 FlatList 配置：initialNumToRender、maxToRenderPerBatch、windowSize、removeClippedSubviews、updateCellsBatchingPeriod、getItemLayout。
- FlashList（@shopify/flash-list）替代 FlatList，需设置 estimatedItemSize。
- Intersection Observer 实现懒加载。
图片优化
- expo-image v2（Expo SDK 54+ 推荐）：blurhash 占位、contentFit、transition、cachePolicy、useImage 命令式加载。
- react-native-fast-image 用于裸 React Native 项目。
- 使用合适尺寸图片、本地图片、渐进式加载。
内存管理
- 在 useEffect 清理函数中取消订阅、清除定时器。
- 内存警告时清理图片缓存（FastImage.clearMemoryCache / clearDiskCache）。
导航性能
- 使用 lazy 与 Suspense 懒加载屏幕。
- React Navigation 优化：enableScreens、detachPreviousScreen。
启动时间优化
- 优化启动屏配置，使用 Hermes 加速启动。
- 使用 InteractionManager.runAfterInteractions 延迟非关键初始化。
动画性能
- Animated 使用 useNativeDriver: true 在原生线程运行（60fps）。
- react-native-reanimated 处理复杂动画（useSharedValue、useAnimatedStyle、withSpring）。
性能监控
- React Native Performance Monitor（摇动设备查看 JS/UI 帧率、RAM）。
- @react-native-firebase/perf 自定义 trace 与 HTTP 监控。
- React DevTools Profiler 检测慢渲染（超过 16ms 警告）。
实用技巧
- 使用 lodash debounce 防抖昂贵操作。
- 用 FlashList 或 RecyclerListView 虚拟化长列表，替代 ScrollView 渲染全部项目。
- 优化 StyleSheet 复用样式对象。
使用方式
本技能以代码示例与配置片段形式提供优化方案，涵盖 metro.config.js、app.json、组件代码等。用户可根据具体性能问题（如慢列表、内存泄漏、启动慢）选择对应章节实施。
适用场景
- 减小应用包体积
- 优化 FlatList/SectionList 性能
- 修复内存泄漏
- 改善应用启动时间
- 消除卡顿与掉帧
- 优化图片加载与缓存
- 减少组件重渲染
- 实现懒加载
- 优化导航性能
- 分析性能瓶颈
- 有效使用 React.memo、useMemo、useCallback
- 实现 60fps 动画
- 配置 Hermes V1
- 使用 React 19.2 Activity 组件保留状态
- 使用 Intersection Observer 懒加载
- 使用 Web Performance API 进行性能分析
- 迁移到 expo-image v2
限制
资料未提供本技能的具体安装命令、收费方式、价格、支持平台范围及实际优化效果数据，这些信息暂未提供。部分特性（Hermes V1、Intersection Observer）标注为实验性或 Canary 阶段，需注意稳定性。