React Native SectionList性能问题

我有一个json对象，它来自我们的api：

{
"data": {
"items": [
{
"id": 1646,
"created_at": "2021-12-10T17:47:25+00:00",
},
{
"id": 1640,
"created_at": "2021-12-10T13:23:49+00:00",
},
{
"id": 1610,
"created_at": "2021-12-10T09:44:55+00:00",
},
{
"id": 1609,
"created_at": "2021-12-10T09:44:19+00:00",
},
{
"id": 1608,
"created_at": "2021-12-10T09:43:46+00:00",
},
{
"id": 1607,
"created_at": "2021-12-10T09:43:07+00:00",
},
{
"id": 1606,
"created_at": "2021-12-10T09:42:31+00:00",
},
{
"id": 1605,
"created_at": "2021-12-10T09:41:52+00:00",
},
{
"id": 1604,
"created_at": "2021-12-10T09:41:13+00:00",
},
{
"id": 1601,
"created_at": "2021-12-09T18:09:15+00:00",
},
{
"id": 1600,
"created_at": "2021-12-09T18:08:45+00:00",
},
{
"id": 1599,
"created_at": "2021-12-09T18:08:21+00:00",
},
{
"id": 1598,
"created_at": "2021-12-09T18:07:48+00:00",
},
{
"id": 1594,
"created_at": "2021-12-09T17:19:54+00:00",
},
{
"id": 1591,
"created_at": "2021-12-09T16:39:10+00:00",
}
],
"page": 1,
"total": 71,
"pages": 5,
"perPage": 15
}
}

我用这个函数按日期对它们进行了分组：

export const createGroups = (data: any, dateField: string) => {
const groups = data?.reduce((grp: any, bundle: any) => {
const date = bundle[dateField]?.split('T')[0];
if (!grp[date]) {
grp[date] = [];
}
grp[date].push(bundle);
return grp;
}, {});
let groupArrays = {};
if (groups) {
groupArrays = Object.keys(groups).map(date => {
return {
date,
data: groups[date],
};
});
}
return groupArrays;
};

返回这个分组数组：

[
{
"date": "2021-12-10",
"data": [
{
"id": 1646,
"created_at": "2021-12-10T17:47:25+00:00"
},
{
"id": 1640,
"created_at": "2021-12-10T13:23:49+00:00"
},
{
"id": 1610,
"created_at": "2021-12-10T09:44:55+00:00"
},
{
"id": 1609,
"created_at": "2021-12-10T09:44:19+00:00"
},
{
"id": 1608,
"created_at": "2021-12-10T09:43:46+00:00"
},
{
"id": 1607,
"created_at": "2021-12-10T09:43:07+00:00"
},
{
"id": 1606,
"created_at": "2021-12-10T09:42:31+00:00"
},
{
"id": 1605,
"created_at": "2021-12-10T09:41:52+00:00"
},
{
"id": 1604,
"created_at": "2021-12-10T09:41:13+00:00"
}
]
},
{
"date": "2021-12-09",
"data": [
{
"id": 1601,
"created_at": "2021-12-09T18:09:15+00:00"
},
{
"id": 1600,
"created_at": "2021-12-09T18:08:45+00:00"
},
{
"id": 1599,
"created_at": "2021-12-09T18:08:21+00:00"
},
{
"id": 1598,
"created_at": "2021-12-09T18:07:48+00:00"
},
{
"id": 1594,
"created_at": "2021-12-09T17:19:54+00:00"
},
{
"id": 1591,
"created_at": "2021-12-09T16:39:10+00:00"
}
]
}
]

这是我的屏幕，里面有SectionList：

import React, { useState } from 'react';
import { VStack, SectionList, Text, HStack, Center } from 'native-base';
import moment from 'moment';
import { useGetAllTransactions } from '../hooks';
import { translate } from '@locale';
import { TransactionCard } from '../components';
import { ActivityIndicator, SectionListData } from 'react-native';
import { createGroups } from 'lib/bundle';
import { Transaction } from 'models/order/transaction';
type GroupedTransaction = {
title: string;
data: Transaction[];
};
export default function EarningListScreen() {
const {
data,
isLoading,
hasNextPage,
isFetchingNextPage,
refetch,
fetchNextPage,
} = useGetAllTransactions();
const [transactions, setTransactions] = useState<GroupedTransaction[]>([]);
React.useEffect(() => {
if (data?.items) {
const bundle = createGroups(
data.items,
'created_at',
) as GroupedTransaction[];
setTransactions(bundle);
}
}, [data]);
const renderItem = ({ item }: { item: Transaction }) => {
return (
<TransactionCard>
<TransactionCard.Item
flex={3}
label={translate('earnings.list.datetime')}
text={moment(item.created_at).format('ddd, MMM DD HH:mm')}
/>
</TransactionCard>
);
};
const renderHeader = (item: {
section: SectionListData<
Transaction,
{ date: string; data: Transaction[] }
>;
}) => (
<HStack>
<Text fontWeight="bold">
{moment(item.section.date).format('MMM YYYY ')}
</Text>
</HStack>
);
return (
<VStack>
<SectionList
contentContainerStyle={{ flexGrow: 1 }}
flexGrow={1}
sections={transactions}
keyExtractor={(item, index) => (item.id + index).toString()}
renderItem={renderItem}
renderSectionHeader={renderHeader}
refreshing={isLoading}
onRefresh={refetch}
onEndReachedThreshold={0.5}
onEndReached={() =>
hasNextPage && !isFetchingNextPage && fetchNextPage()
}
ListEmptyComponent={() => null}
showsVerticalScrollIndicator={false}
/>
</VStack>
);
}

但是SectionList存在性能问题。我认为我的createGroups函数有一些问题，我不知道为什么以及如何处理。