如何排查Expo React Native安卓平板应用卡顿问题

一、用Hermes内置性能分析工具定位慢函数 #

因为你用了Hermes引擎，这是最适配当前Expo 47场景的方案：

• 确保应用处于调试构建模式（Expo默认启动的就是调试模式）
• 用adb连接安卓平板，执行adb devices确认设备能被识别
• 打开Expo开发菜单：平板摇一摇，或者在终端执行adb shell input keyevent 82
• 选择「Debug Remote JS」，启动Hermes调试会话
• 打开Chrome浏览器，输入chrome://inspect，找到你的Expo应用点击「inspect」
• 切换到「Performance」标签，点击录制按钮，执行“添加项目”操作后停止录制，就能看到完整的函数调用时间线，直接定位耗时超标的函数
• 提示：如果之前Chrome调试器适配异常，关闭所有其他Chrome调试会话，重启Expo服务和应用后再试

二、修复React DevTools在Expo 47的连接问题 #

你之前访问http://xxx:19000/_expo/react-devtools失败，换用CLI方式启动：

• 全局安装React DevTools：npm install -g react-devtools
• 启动Expo应用（调试模式），然后在终端单独运行react-devtools
• 打开Expo开发菜单，选择「Enable Debugging」，React DevTools会自动连接到应用
• 切换到「Profiler」标签，点击录制后执行添加操作，就能看到组件渲染的时间线，排查是否是列表重渲染导致的卡顿（比如没给FlatList设keyExtractor、列表项没加React.memo）

三、补充内存与函数耗时监控 #

针对Expo内置监控信息不足的问题，手动添加监控：

• 内存监控：用adb shell dumpsys meminfo <你的应用包名>查看实时RAM使用；或者在代码中引入expo-system-info的getMemoryUsage，在添加操作前后调用并打印结果，对比内存变化
• 函数耗时埋点：在添加逻辑前后加时间戳，快速定位耗时段：

const addItem = async () => {
  const start = performance.now();
  // 你的添加项目核心逻辑
  const end = performance.now();
  console.log(`添加操作总耗时：${end - start}ms`);
};

通过Expo开发菜单的「Show Logs」查看输出，逐步缩小慢代码范围

四、列表优化针对性排查 #

既然卡顿出现在列表添加后，优先检查列表组件的渲染优化：

• 确认FlatList是否设置了maxToRenderPerBatch、windowSize等优化属性，控制单次渲染的列表项数量
• 检查列表项是否用React.memo包裹，避免不必要的重渲染
• 验证添加项目时的状态更新是否遵循不可变原则（比如用[...oldArray, newItem]而不是oldArray.push(newItem)），防止触发整个列表的全量重渲染

内容的提问来源于stack exchange，提问作者Zach Rattner