Android端Expo/React Native组件切换过慢问题求助

问题分析 #

你遇到的Android端切换卡顿，核心原因是每次切换时组件被重复卸载/挂载，加上parseAcrosticPuzzle在组件内部重复执行，导致大量计算开销。Web端因DOM渲染机制不同无此问题；memo无效是因为组件根本没进入重渲染流程，而是每次切换都重新创建了新的组件实例。

解决方案 #

1. 缓存解析后的puzzle数据，避免重复计算

当前代码中parseAcrosticPuzzle(PUZZLE_TEXT)写在组件内部，每次组件渲染都会重新解析字谜数据。如果PUZZLE_TEXT是静态常量，直接把解析逻辑移到组件外部，仅执行一次：

// 组件外静态解析，仅执行一次
const puzzle: AcrosticPuzzleData = parseAcrosticPuzzle(PUZZLE_TEXT);

const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => {
  const [index, setIndex] = React.useState(0);

  // ... 剩余代码
}

如果PUZZLE_TEXT是动态数据（比如从API获取），用useMemo缓存解析结果：

const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => {
  const [index, setIndex] = React.useState(0);
  // 仅当PUZZLE_TEXT变化时重新解析
  const puzzle = React.useMemo(() => parseAcrosticPuzzle(PUZZLE_TEXT), [PUZZLE_TEXT]);

  // ... 剩余代码
}

2. 改为“挂载后隐藏”的切换方式，避免重复挂载组件

现在的条件渲染会在切换时卸载旧组件、挂载新组件，触发大量子元素的初始化和渲染。改为同时挂载两个组件，通过样式控制显示隐藏：

const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => {
  // 静态解析或useMemo缓存puzzle
  const puzzle: AcrosticPuzzleData = parseAcrosticPuzzle(PUZZLE_TEXT);
  const [index, setIndex] = React.useState(0);

  // 用绝对定位让两个组件叠在一起，避免布局重排
  const contentWrapperStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  };

  return <View style={styles.container}>
    {/* Grid组件：index=0时显示 */}
    <View style={[contentWrapperStyle, { display: index === 0 ? 'flex' : 'none' }]}>
      <PuzzleGrid puzzle={puzzle} />
    </View>
    {/* Clues组件：index=1时显示 */}
    <View style={[contentWrapperStyle, { display: index === 1 ? 'flex' : 'none' }]}>
      <PuzzleCluesView puzzle={puzzle} />
    </View>
    {/* 操作栏放在最上层，避免被覆盖 */}
    <View style={[styles.keyboardContainer, { zIndex: 10 }]}>
      <Button 
        onPress={() => setIndex(index === 1 ? 0 : 1)} 
        title={"See " + routes[index === 0 ? "Grid" : "Clues"].key} 
      />
      <Keyboard />
    </View>
  </View>;
}

这种方式下两个组件只会挂载一次，切换时仅改变样式，无组件卸载/挂载的额外开销。

3. 优化子组件的渲染性能

检查PuzzleGrid和PuzzleCluesView内部：

• 若存在大量重复子元素（比如填字网格的每个格子），给每个子组件套上memo，避免不必要的重渲染；
• 用FlatList/SectionList替代ScrollView包裹大量元素，利用虚拟化渲染减少内存占用和渲染时间；
• 避免在子组件的render方法中执行复杂计算，尽量把计算逻辑提到父组件或用useMemo缓存。

4. 生产构建的额外优化

• 执行npx expo prebuild生成原生项目，再用Android Studio构建Release版本，性能优于Expo直接打包的APK；
• 确保app.json中expo.packagerOpts.dev设为false，关闭开发调试工具的额外开销；
• 移除项目中未使用的依赖，减少APK体积和运行时负载。

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