VirtualizedList:您有一个更新速度慢的大列表
我使用FlatList来处理大量的项目。我接到XDE世博会的警告。
VirtualizedList:您有一个更新速度慢的大列表--确保您的renderItem函数呈现遵循PureComponent、shouldComponentUpdate等性能最佳实践的组件。{"dt":13861，"prevDt":1498372326027，"contentLength":6624}
我对我的FlatList使用了一些优化方法，例如PureComponent，但是我仍然收到这个警告。在我描述我的优化之前，您能否告诉我，即使优化了FlatList，这个警报是否总是出现呢？或者它表明了性能方面的实际问题？我之所以这样问是因为我的FlatList性能很好。
回答 7
Stack Overflow用户
发布于 2020-08-10 20:21:07
我注意到，这个问题的答案并没有为那些使用函数组件和钩子的人提供更好的解决方案。我遇到了这个问题，我能够通过使用钩子"useMemo()“来摆脱它。
<FlatList
keyExtractor={keyExtractor}
data={productsState.products}
renderItem={renderItem}
/>
const renderItem = ({ item }) => (
<ListItem
title={item.ProductName}
subtitle={(item.ProductQuantity) + " " + (item.QuantityType !==
null ? item.QuantityType : " ") }
bottomDivider
topDivider
chevron
checkmark={checkMark}
onLongPress={() => setCheckMark(!checkMark)}
rightSubtitle={(item.Currency !== null ? item.Currency: " " ) +
" " + (item.productCost !== null ? item.productCost: " " )}
rightSubtitleStyle={{ marginTop: -20 }}
badge={{ value: item.sellingPrice, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}
/>
)renderItem函数是一个昂贵的计算，因为它是一个很长的列表来呈现。相反，我将其回忆录如下
const memoizedValue = useMemo(() => renderItem, [productsState.product]);
<FlatList
keyExtractor={keyExtractor}
data={productsState.products}
renderItem={memoizedValue}
/>
const renderItem = ({ item }) => (
<ListItem
title={item.ProductName}
subtitle={(item.ProductQuantity) + " " + (item.QuantityType !==
null ? item.QuantityType : " ") }
bottomDivider
topDivider
chevron
checkmark={checkMark}
onLongPress={() => setCheckMark(!checkMark)}
rightSubtitle={(item.Currency !== null ? item.Currency: " " ) +
" " + (item.productCost !== null ? item.productCost: " " )}
rightSubtitleStyle={{ marginTop: -20 }}
badge={{ value: item.sellingPrice, textStyle: { color: 'orange' }, containerStyle: { marginTop: -20 } }}
/>
)不要忘记从react中导入useMemo，以便使其工作。
祝好运!
Stack Overflow用户
发布于 2021-12-01 05:22:35
如果您使用的是功能组件，那么用memo包装组件是一种很好的方法，可以避免不必要的呈现，而不必经历将功能组件转换为纯类组件的麻烦。这个帖子解释的更多
遵循以下示例：
在父组件中：
import React from 'react';
import {FlatList} from 'react-native';
import PostCard from './PostCard';
export const NewsFeeds = props => {
return (
<FlatList
data={data}
initialNumToRender={4}
refreshing={loading}
renderItem={_renderitem}
/>
);
};
const _renderitem = ({item}) => <PostCard item={item} />;在子组件中
import React, {memo} from 'react';
import {View} from 'react-native';
const PostCard = (props) => {
return (
<View>
</View>
);
};
export default memo(PostCard);如果使用的是类组件，请通过在类定义中扩展React. PureComponent来确保组件是纯组件。
class NewsFeeds extends React.PureComponent {
render() {
return (
<FlatList
data={data}
initialNumToRender={4}
refreshing={loading}
renderItem={_renderitem}
/>
)
}
}Stack Overflow用户
发布于 2021-07-27 15:42:26
添加此道具：
initialNumToRender={n} 为我工作过(例如，n是一个相当短的数量)。
https://stackoverflow.com/questions/44743904
复制相似问题
腾讯云开发者
