React native 当数据更改时,反应本机flatlist呈现所有列表项
我有一个平面列表的简化版本,它每5秒向数据中添加一个唯一的项React native 当数据更改时,反应本机flatlist呈现所有列表项,react-native,react-native-flatlist,react-native-windows,React Native,React Native Flatlist,React Native Windows,我有一个平面列表的简化版本,它每5秒向数据中添加一个唯一的项 import React, {useState, useEffect, useMemo} from 'react'; import {SafeAreaView, Text, FlatList, ListRenderItem} from 'react-native'; interface LogMessage { message: string; } const LogElement = (props: LogMessage)
import React, {useState, useEffect, useMemo} from 'react';
import {SafeAreaView, Text, FlatList, ListRenderItem} from 'react-native';
interface LogMessage {
message: string;
}
const LogElement = (props: LogMessage) => {
return useMemo(() => {
return <Text>{props.message}</Text>;
}, [props.message]);
};
const FlatListRendersTooMuch = () => {
const [flatListContents, setFlatListContents] = useState([] as LogMessage[]);
useEffect(() => {
console.log('mounting');
const id = setInterval(() => {
console.log('adding new message');
setFlatListContents(f =>
f.concat({
message: new Date().toString(),
}),
);
}, 5000);
return () => {
console.log('unmounting');
clearInterval(id);
};
}, []);
const keyExtractor = (item: LogMessage) => {
return item.message;
};
const renderItem: ListRenderItem<LogMessage> = ({item}) => {
console.log('renderItemMemoFucntion ' + item.message);
return <LogElement {...item} />;
};
const renderItemMemoized = useMemo(() => renderItem, []);
return useMemo(() => {
return (
<SafeAreaView>
<FlatList
style={{height: 150, paddingTop: 10}}
data={flatListContents}
renderItem={renderItemMemoized}
keyExtractor={keyExtractor}
/>
</SafeAreaView>
);
}, [flatListContents, renderItemMemoized]);
};
这是添加第二条消息时的输出:
adding new message
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
adding new message
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:23 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:23 GMT-0500 (Central Daylight Time)
这是添加第三条消息时的输出:
adding new message
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
adding new message
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:23 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:13 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:18 GMT-0500 (Central Daylight Time)
renderItemMemoFucntion Wed Apr 14 2021 16:56:23 GMT-0500 (Central Daylight Time)
我的期望是,由于我记忆了render函数,这将导致renderItemMemoFunction只被添加到平面列表中的新元素调用。为什么不发生这种情况