React Native 中 FlatList 的性能问题

Question

我有一个带有两个屏幕的 TabNavigator，每个屏幕代表一个堆栈导航器。在第一个屏幕上，所有食谱都显示在 FlatList 中，我从 Redux 存储中获取数据。第二个屏幕还包含一个 FlatList，其数据依赖于第一个屏幕并从存储中获取。我修改第一个屏幕上 FlatList 中每个单独项目的状态。初始应用程序加载时没有问题，但导航到第二个屏幕并返回后，从收藏夹添加和删除项目的过程开始滞后。而且，添加的项目越多，功能就越慢。这是存储库的链接：https://github.com/AlexeyKaluzhniy/recipesApp

我尝试使用 React.memo 和 FlashList 而不是 FlatList。虽然 FlashList 确实提高了性能，但仍然存在明显的延迟。感觉添加的项目比实际添加的项目多，并且列表不断重新渲染组件。我不知道问题是什么；我真的需要帮助。

Answer 1

当您打开“收藏夹”选项卡然后导航回“食谱”选项卡时，“收藏夹”选项卡仍保持安装状态。请参阅导航生命周期文档。

因此，当您按下心形按钮时，“收藏夹”选项卡会在后台重新呈现，因为它订阅了商店中正在更改的部分。

您需要根据其聚焦或模糊状态来控制“收藏夹”选项卡。

#1。当选项卡模糊时不渲染任何内容

export default function Favorite({ navigation }: FavoriteProps) {
    const favoritesData = useSelector(selectFavoriteData);
    const dispatch = useDispatch();
    const isFocused = useIsFocused();

    if (!isFocused) return null;

    // return ...
}

这是最简单的方法，但在选项卡之间切换时滚动状态会丢失。

#2。手动管理商店订阅

export default function Favorite({ navigation }: FavoriteProps) {
    const store = useStore<RootState>();
    const [favoriteIds, setFavoriteIds] = useState<string[]>();
    const favoritesData = store.getState().data.recipes
        .filter(recipe => favoriteIds.includes(recipe.id));

    useFocusEffect(useCallback(() => {
        const storeListener = () => setFavoriteIds(store.getState().favorite.recipeIds);
        storeListener();
        return store.subscribe(storeListener);
    }, [store]));

    // return ...
}