当数据更改时，响应原生 flatlist 呈现所有列表项

问题描述

我有以下简化版的 FlatList，每 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]);
};

我相信这遵循了最佳 FlatList 性能的最佳实践：

• 提供密钥提取器
• 记住渲染项 JSX 函数
• 记住渲染项函数本身

然而，列表呈现的效果超出预期（如 renderItem 方法中的日志语句所示）。例如，这是将第一个元素添加到列表时的输出：

adding new message 
renderItemmemoFucntion Wed Apr 14 2021 16:56:13 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)

我的期望是，由于我记住了渲染函数，这将导致仅为添加到 FlatList 的新元素调用 renderItemmemoFunction。为什么没有发生这种情况？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）