渲染列表反应原生答案

【问题标题】：Rendering lists react native渲染列表反应原生
【发布时间】：2021-09-07 13:21:41
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： javascript reactjs react-native optimization react-native-flatlist

【解决方案1】：

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

【讨论】：

List 组件内部有一个 FlatList，它没有帮助。

【解决方案2】：

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

为了修复它，我在 recoil 中创建了 isDetail 状态（你可以向它抛出 redux、mobx、上下文等），使用模态创建新组件，并在这个名为 isDetail 的新组件中从 recoil 中创建。

【讨论】：