У меня есть компонент UIFlatLıst, и я передаю данные из родительского компонента. Когда я вызываю компонент uiflatlist, этот компонент запускается только один из-за памятки. Но внутри всех данных имеется плоский список компонентов renderItem и функция keyExtractor, вызываемая дважды. Почему это происходит?
const UIFlatLıst = props => {
const flatListRef = useRef();
renderRow = (item, index) => {
console.log('renderRıw run' + index);
let renderItem;
switch (item.type) {
case ComponentTypes.UIText:
renderItem = <UIText TextItem={item} />;
break;
case ComponentTypes.UICarousel:
renderItem = (
<Box p={10}>
<Box flexDirection="row" alignItems="center">
<ScrollView horizontal={true}>
<Combo
Click={props.ButtonClick}
CarouselItem={item.component}
IsDisabled={item.InitiallyDisabled}
/>
</ScrollView>
</Box>
</Box>
);
break;
default:
break;
}
return renderItem;
};
console.log('uiflatlistRndered');
return (
<FlatList
ml={10}
data={props.MessageList}
keyExtractor={(item, index) => item.component.UIId + index.toString()}
ref={flatListRef}
renderItem={({item, index}) => renderRow(item,index)}
onContentSizeChange={() =>
flatListRef.current.scrollToEnd({animated: true})
}
onLayout={() => flatListRef.current.scrollToEnd({animated: true})}
ListFooterComponent={
props.Isloading && (
<Box alignSelf="flex-start">
<Loader />
</Box>
)
}
/>
);
};
export default React.memo(UIFlatLıst, areEqual);
function areEqual(prevProps, nextProps) {
if (prevProps.MessageList === nextProps.MessageList) {
return true;
}
}
здесь вывод
- renderRıw run0
renderRıw run1
renderRıw run2
renderRıw run3
renderRıw run4
renderRıw run5
UIText. js: 9 текстовых прогонов
UIInput. js: 15 UIInput прогон.
renderRıw run0
renderRıw run1
renderRıw run2
renderRıw run3
renderRıw run4
renderRıw run5