React Native安卓端FlatList加载大量数据时内存溢出崩溃问题
安卓FlatList滚动加载Redux数据时内存耗尽崩溃问题
安卓设备上(iOS设备运行正常),无论处于debug还是release模式,滚动FlatList并通过Redux action将API获取的新数据添加到列表时,应用会耗尽内存并崩溃。
FlatList代码
<FlatList style={{ width: '100%' }} ListFooterComponentStyle={{ marginBottom: 15 }} //ListFooterComponent={() => isLoading || (dataSynchronizing && !isSyncingHidden) ? <View style={{ paddingVertical: 2, alignItems: 'center', marginTop: 12 }} ><DotsLoader color={Colors.blue} size={10} /></View> : <View style={{ height: 0, margin: 0, padding: 0 }}></View>} ListEmptyComponent={() => (isLoading ? null : <DefaultText style={{ fontSize: 15, width: '100%', textAlign: 'center', color: Colors.lightgray, marginTop: 20 }}>{T.i18n.t('reports.none_found')}</DefaultText>)} data={dailyReportsWithPending.filter(report => !report.is_draft || (report.is_draft && report.user_id == userId)).sort((x, y) => { y.id - x.id })} keyExtractor={item => item.id.toString()} renderItem={renderItem} onEndReachedThreshold={0.01} onEndReached={() => { console.log("next page", reportsPage) if (!dataSynchronizing) store.dispatch(dailyReportsActions.loadDailyReports(activeProject.id, userEmail, authenticationToken, reportsPage)); }} showsVerticalScrollIndicator={false} initialNumToRender={10} onRefresh={onRefresh} refreshing={refreshing} windowSize={8} removeClippedSubviews={true} />
简化后的列表项渲染函数
为排查问题,已将列表项简化为仅展示ID:
const renderItem = ( itemData ) => (<Text>{itemData.item.id}</Text>);
ID能正常显示,但列表增大过程中原生堆内存持续增长直至崩溃,Android Studio Profiler快照显示内存占用呈持续攀升趋势。
Redux加载数据Action(搭配redux-persist使用)
export const loadDailyReports = (projectId, email, token, page) => { return async dispatch => { dispatch(authActions.setDataSynchronizing()); let resources = ['not-empty']; const response = await fetch(`${Environment.active}/api/v2/projects/${projectId}/daily_reports?page=${page}`, { method: 'GET', headers: { 'Content-Type': 'application/json', 'X-User-Email': email, 'X-User-Token': token } }); const data = await response.json(); if (!response.ok) { throw new Error(data.errors.toString()); } dispatch(appendDailyReports(data.resources)); dispatch(authActions.setDataSynchronized()); } };
补充说明
已将问题范围缩小到将fetch结果分发至reducer的环节,每次fetch返回的JSON对象体积很大,目前正在排查redux-persist是否为问题诱因。
内容的提问来源于stack exchange,提问作者amorimluc
相关产品推荐
相关产品推荐

