时间戳

首页 > 解决方案 > 渲染列表反应原生

javascript - 渲染列表反应原生

问题描述

我正在使用本机反应并具有带模态的父组件。当模式打开时，我的带有列表的子组件会重新呈现一次，但界面冻结约 1 或 2 秒取决于列表中的元素。列表的平均大小为 50 个元素。有什么问题？

<View style={styles.screenWrapper}>
        <View style={styles.container}>
            <List
                onChoose={onChoose}
                flightOffers={paginatedFlightOffers}
                isRequesting={isLoadingOffers}
                isLoadingMore={isLoadMore}
                isLoadingResults={!paginatedFlightOffers.length}
                currency={{ value: searchId?.searchId.currencyRates[body.currency], name: body.currency }}
                showMoreFlightOffers={showMoreFlightOffers}
            />
        </View>
        <NativeModal
            visible={isDetails}
            onClose={onDetailsClose}
            animationType="fade"
        >
            <View>
                <Text>asdf</Text>
            </View>
        </NativeModal>
    </View>

在List组件内部有 FlatList，有时它会用我使用的建议写入注意消息。也许可以避免重新渲染，因为List组件中的道具保持不变。我曾尝试使用 React.memo，但仍然存在重新渲染

标签： javascriptreactjsreact-nativeoptimizationreact-native-flatlist

解决方案

您应该尝试使用平面列表，因为它虚拟化列表它只呈现小批量元素并且更高效

推荐阅读