用途:审查 React Native 代码的渲染性能、列表虚拟化、memo 化、图片处理、动画以及内存与资源清理。适用于屏幕掉帧、卡顿或变慢,合并前审查 UI 密集代码或长列表,分析重渲染或会话内存增长,以及新增动画或大图时。适用平台为 iOS 与 Android,React Native 0.76+(默认新架构互操作)。
主要能力与检查点:渲染方面,避免向 memo 化子组件传内联函数(会破坏 React.memo),重计算用 useMemo 包裹,回调用 useCallback 包裹,内联样式提取到 StyleSheet.create,避免不必要的重渲染(可用 why-did-you-render 等工具验证)。列表方面,长列表使用虚拟化高性能列表(如 FlashList)而非普通 FlatList,大数据集分页或无限滚动,列表项适当 memo 化。图片方面,首屏以下图片懒加载,使用现代压缩格式(如 WebP)且尺寸正确。动画方面,复杂动画在 UI 线程运行(如 Reanimated)而非 JS 线程,动画不阻塞交互。加载与导入方面,按导航栈懒加载屏幕,避免为单个函数导入整个库,避免挂载时同步存储读取阻塞首屏。内存与资源方面,卸载时取消异步操作、清除定时器与 interval、移除事件监听,缓存需有最大容量与淘汰策略。
用法示例:回调用 useCallback 包裹后传给子组件;useEffect 中创建的 interval 需在返回函数中 clearInterval。
反模式:长列表用 FlatList 会掉帧,应改用 FlashList 或等价方案;频繁读取慢存储会阻塞 JS 线程,应使用快速键值存储(如 MMKV);复杂动画用 Animated API 会造成 JS 线程卡顿,应使用 Reanimated;渲染中使用内联样式每次生成新对象破坏 memo,应使用 StyleSheet.create;过度 memo 化简单组件会增加开销,应先测量再优化热点。
限制与注意:过度 memo 化简单组件得不偿失,优化前先测量;useMemo 或 useCallback 依赖数组错误会静默返回过期值;内存泄漏在长时间会话中累积,短生命周期屏幕也需清理;AbortController 必须按请求创建,不能跨调用共享。