数据更新时多次调用 FlatList、renderItem

Question

我在我的 RN 应用程序中使用 Socket.io 和 FlatList 每 5 秒显示一个新数据（最长执行时间为 1 分钟）。
每 5 秒，我的列表状态中就会有一个新值，并且我的 FlatList 会更新。
但似乎我的 Flatlist 的 renderItem 函数每次都被调用以重新渲染多次结果。
我尝试使用 useCallback 优化我的代码，但我认为它效率不高。
您可以在此处查看我的代码（简化版）：

export default function MyList({ navigation }) {
    const [myData, setMyData] = useState<ResponseType[]>([])

    // Socket Io
    const socket = io(SOCKET_URL, { forceNew: true, timeout: 5000 })

    useEffect(() => {
        socket.on("connect", () => {
            console.log("Connected to Socket ID : ", socket.id)
        })

        return () => {
            socket.disconnect()
            socket.close()
        }
    },[])

    socket.on("socketResponse", (data: ResponseType) => {
        setMyData(prevDate => [...prevDate, data])
    })

    const renderListItem = useCallback(({ item }: { item: ResponseType }) => {
        console.log(item.id)

        return (
            <TouchableOpacity key={ item.id }>
                <Text>{ item.id }</Text>
            </TouchableOpacity>
        )
    }, [])

    return (
        <FlatList
            data={myData}
            keyExtractor={(item) => item.id}
            renderItem={renderListItem}
            maxToRenderPerBatch={5}
            windowSize={2}
        />
    )
}

我在 renderListItem 函数中添加了一个 console.log，但列表中有 3 个元素，日志如下所示：

2e1f24c2-c848-44d6-98c2-3f88fc9c3fb7

2e1f24c2-c848-44d6-98c2-3f88fc9c3fb7
48355de9-b996-4e6e-bd31-abbbbca32756
2e1f24c2-c848-44d6-98c2-3f88fc9c3fb7
48355de9-b996-4e6e-bd31-abbbbca32756

2e1f24c2-c848-44d6-98c2-3f88fc9c3fb7
48355de9-b996-4e6e-bd31-abbbbca32756
21b94228-f5b9-4661-8fbf-5d813451dc31
2e1f24c2-c848-44d6-98c2-3f88fc9c3fb7
48355de9-b996-4e6e-bd31-abbbbca32756
21b94228-f5b9-4661-8fbf-5d813451dc31

就像 renderListItem 被调用 2 次每个新值以重新呈现 FlatList。
我知道我的物品需要使用 PureComponent，但我认为这不是真正的问题。

如何更好地优化我的renderListItem？

谢谢

Answer 1

您好，请查看 javascript 中的集合。我建议使用集合并将 id 分配给集合键，值将是您的值，这样数据将始终是唯一的。你可以阅读更多关于sets here