FlatList、Props ListHeaderComponent 和动态 flatlist 数据

Question

抱歉标题，我没有受到启发，而且我不知道为我的问题取什么标题。
我在我的 React 本机应用程序上使用 Socket.io 来渲染一些动态数据。
我正在使用FlatList 来显示所有这些数据，并且我需要在FlatList 的顶部显示一些内容，例如过滤器和按钮。
所以在我的FlatList 道具中，我使用了ListHeaderComponent，在这个组件中我显示了另一个平面列表和内容。
我的问题是：

当使用 Socket.io 响应之一（每 5 秒）更新主 FlatList 时，ListHeaderComponent 显示的所有组件在一段时间内都无法使用。
这段时间大概是500ms或者更少，但是在ListHeaderComponent我有一些按钮/过滤器，在这段时间内它们是不可点击的。
并且每次更新 FlatList 数据时都会重复该问题。
您可以在此处查看我的代码（简化版）：

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 renderFilterItem = ({ item }: { item: Filter }) => <Text key={ item.id }>{ item.title }</Text>
    const renderListItem = ({ item }: { item: ResponseType }) => <Text key={ item.id }>{ item.id }</Text>

    const ListTop = () => (
        <>
            <TouchableOpacity onPress={() => navigation.navigate('HomePage')}>
                <Text>BACK CONTENT</Text>
            </TouchableOpacity>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={someFilters}
                keyExtractor={(item) => item.id}
                renderItem={renderFilterItem}
            />
        </>
    )

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

我不知道如何更好地解释我的问题。但是如果我把ListHeaderComponent的组件移到FlatList上面，就没有问题了。
但如果我这样做，只有 FlatList 是可滚动的，我希望所有页面都可滚动。
由于此错误，我无法用 ScrollView 包装我的 Flatlist：VirtualizedLists 永远不应嵌套在具有相同方向的普通 ScrollViews 中

有人遇到过这个问题吗？

谢谢

Answer 1

尝试对 ListTop 组件进行优化，因为这里可能出现的问题是由于父组件的更改而呈现您的功能组件。

这里是代码示例。

import React, {useCallback} from 'react';

// your other codes
const ListTop = useCallback(() => (
        <>
            <TouchableOpacity onPress={() => navigation.navigate('HomePage')}>
                <Text>BACK CONTENT</Text>
            </TouchableOpacity>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={someFilters}
                keyExtractor={(item) => item.id}
                renderItem={renderFilterItem}
            />
        </>
    ), [someFilters]);

这里的组件将被记忆，直到 someFilters 没有变化。