React native 当数据更改时,反应本机flatlist呈现所有列表项

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)

我有一个平面列表的简化版本,它每5秒向数据中添加一个唯一的项

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只被添加到平面列表中的新元素调用。为什么不发生这种情况