React Native Expo应用页面切换时CPU占用骤升问题排查求助

数据老陈

2026-7-15

React Native Expo页面切换CPU骤升排查方案

Native Stack默认可能预渲染页面，试试在屏幕配置里添加options={{ lazy: true }}，强制仅当页面激活时才渲染组件，避免提前加载带来的CPU开销。
检查导航配置里的组件传入方式：别用component={() => <MyScreen />}这种写法，直接传component={MyScreen}，防止每次导航渲染都重新创建组件实例。

2. 检查Redux状态更新的开销

页面切换时有没有触发批量Redux action？用Redux DevTools查看action日志，排查是否有不必要的重复dispatch，或者单次action导致大量深层state更新（这类操作会触发大量组件重渲染）。

优化useSelector的使用：避免直接取深层嵌套的state，或者添加shallowEqual来减少不必要的重渲染，比如：

import { shallowEqual, useSelector } from 'react-redux';

// 优化后写法
const targetData = useSelector(state => state.module.targetData, shallowEqual);

开启Flashlight的CPU火焰图功能，捕获页面切换时的CPU峰值时段，定位是JS线程还是UI线程占用过高：
- 如果是JS线程，查看调用栈里的函数，排查是否有大量同步计算、组件渲染逻辑或者第三方库的同步操作。
- 重点检查页面挂载时的useEffect/useLayoutEffect，有没有同步执行大计算量的逻辑（比如解析大JSON、循环处理数据），这类操作会瞬间阻塞JS线程。

试试禁用页面切换的默认动画：在导航的screenOptions里设置animationEnabled: false，如果CPU飙升消失，说明是动画导致的性能问题，可以进一步调整动画参数（比如用TransitionSpec缩短动画时长、改用更轻量的easing函数）。
检查当前版本的已知问题：expo 47（对应react-native 0.70.8）和react-navigation native-stack 6.9.9有没有类似的CPU占用issue，部分旧版本的导航动画可能存在性能漏洞。

检查页面组件的挂载逻辑：有没有在useEffect(() => {}, [])里执行同步的重操作（比如同步读取本地存储、初始化第三方SDK），这些会在页面切换时瞬间占用CPU。
暂时移除第三方库（比如统计、日志类），看CPU情况是否改善，排查是否是第三方库初始化导致的开销。

用Flashlight查看GC频率：如果页面切换时触发大量垃圾回收，可能是之前的页面组件没有正确卸载（比如未清理订阅、定时器），导致内存堆积，GC时CPU飙升。

检查组件的清理逻辑：确保useEffect的清理函数里清除了定时器、事件订阅等，比如：

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  // 清理定时器
  return () => clearInterval(timer);
}, []);

内容的提问来源于stack exchange，提问作者Wahidullah Shadab