用途:在优化 React Native 应用性能、加快加载速度与提升交互流畅度时使用。
主要能力: 列表性能:优化 FlatList 大数据集,示例涉及 React.memo、useCallback、keyExtractor、getItemLayout 及 removeClippedSubviews、maxToRenderPerBatch、updateCellsBatchingPeriod、initialNumToRender、windowSize 等参数。 组件记忆化:使用 React.memo 与 useMemo 减少重复渲染和昂贵计算。 图片优化:使用 react-native-fast-image 控制优先级与缓存,并支持懒加载与 Image.prefetch 预加载。 最佳实践:事件处理用 useCallback;滚动内容使用 FlatList/SectionList 虚拟化列表而非 ScrollView+map;避免渲染中匿名函数;避免内联大对象,改用 StyleSheet 与常量。 包体积优化:使用 npx react-native-bundle-visualizer 分析包,启用 Hermes(Expo 在 app.json 配 jsEngine,裸项目在 android/app/build.gradle 设 enableHermes),Android 启用 ProGuard。 代码分割:使用 React.lazy 与 Suspense 懒加载重组件。 常见模式:防抖搜索、使用 react-native-reanimated 优化动画、分页加载、记忆化选择器。 反模式:生产环境避免 console.log;避免循环内 setState;effect 中需清理定时器等资源。 性能分析:React DevTools Profiler 与 PerformanceObserver 测量。
使用方式:作为技能按需查阅对应代码示例与配置片段,示例命令和配置保持原样。
适用场景:React Native 应用存在列表卡顿、重复渲染、图片加载慢、包体积过大等问题时。
限制:部分示例依赖外部库(如 react-native-fast-image、react-native-reanimated)与特定项目配置;官方说明中未提供的收费、价格与平台支持信息暂未提供。