渲染列表反应本机

Question

我使用的是 React Native，父组件带有模态。当模态打开时，我的带有列表的子组件重新呈现一次，但界面冻结约 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，但仍然存在重新渲染

Answer 1

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

Answer 2

从我的朋友那里得到了这个问题的答案并修复了重新渲染。 List 每次打开模式时都重新渲染的原因是 isDetails 状态在父组件中发生变化。所以每次状态改变时，我的父组件也会完全重新渲染。

为了修复它，我在反冲中创建了 isDetail 状态（你可以向它抛出 redux、mobx、context 等），创建了带有模态的新组件，并在这个名为 isDetail 的新组件中后坐力。

渲染列表反应本机

Rendering lists react native

javascript

reactjs

react-native

optimization

react-native-flatlist