为什么 Android 上两个组件之间的切换速度如此之慢？

Question

我正在使用 Expo/React Native/Typescript 构建一个类似于填字游戏的小型拼图应用程序。

这是 PuzzleMain 组件的精简版本：

const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => {
    let puzzle: AcrosticPuzzleData = parseAcrosticPuzzle(PUZZLE_TEXT);

    const grid = <PuzzleGrid puzzle={puzzle} />;
    const clueView = <PuzzleCluesView puzzle={puzzle} />;

    const [index, setIndex] = React.useState(0);

    return <View style={styles.container}>
        {index == 0 ? grid : clueView}
        <View style={styles.keyboardContainer}>
            <Button onPress={() => setIndex(index == 1 ? 0 : 1)} title={"See " + routes[index == 0 ? "Grid" : "Clues"].key} />
            <Keyboard />
        </View>
    </View>;
}

总结一下，有“网格”组件和“线索”组件，并通过按钮在它们之间进行切换。

毫不夸张地说，在我用来测试的 Pixel 5 上点击此按钮大约需要 3 秒的时间才能进行更改。我在这里做错了什么？使用Expo在网络上打开这个，它立即发生，所以可能它是Android特有的？

我尝试过的事情：

1. 记住

   PuzzleGrid

   和

   PuzzleCluesView

   组件（

   const PuzzleGrid: React.FC<Props> = memo(({ puzzle }) ...

   。这基本上没有什么区别。我检查过，在我为备忘录功能制作的自定义拼图比较器中没有打印任何内容，所以我认为它没有重新渲染。
2. 改用 TabView 在组件之间滑动 - 这有效！但说实话，我真的更喜欢两者兼得，而且当我将其合并到 TabView 实现中时，按钮同样很慢。
3. 使用

   npx expo start --no-dev

   并仅构建一个 apk 并安装 - 这使得速度更快，但仍然可能需要整整一两秒，这太慢了。

Answer 1

正如我所看到的，您正在执行条件渲染，因此每次条件更改时，整个组件都会被创建为新组件。这种方法会使渲染速度变慢，具体取决于组件的重量。

为什么备忘录不起作用？ Memo 是一种优化技术，并不能保证性能提升。

现在，提升加载速度

1. 内部优化

   PuzzleGrid

   和

   PuzzleCluesView

   ，比如每个可以接收重复道具的子组件都会被memo覆盖，重型物品会异步加载，使用loader。
2. 使用 InteractionManager 提高加载速度，并帮助显示加载程序而不冻结 UI。
3. 不要卸载组件，而是重叠它们并使用可见性，因为可见性不会卸载组件

而不仅仅是

{index == 0 ? grid : clueView}

你可以尝试类似的事情

  <View>
    {grid}
    <View
      style={{
        // Add height and other required props to make it visible
        position: 'absolute',
        visibility: index == 0 ? 'hidden' : 'visible',
      }}>
      {clueView}
    </View>
  </View>