FlatList、Props ListHeaderComponent 和 Dynamic flatlist 数据

Question

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

当主要 FlatList 使用 Socket.io 响应之一更新时（每 5 秒），ListHeaderComponent 显示的所有组件在一段时间内都无法使用。
这段时间大约为 500 毫秒或更短，但在 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 包装我的平面列表：VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

有人遇到过这个问题吗？

谢谢

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 没有变化。

FlatList、Props ListHeaderComponent 和 Dynamic flatlist 数据

FlatList, Props ListHeaderComponent and Dynamic flatlist data

socket.io

reactjs

react-native

react-native-android

react-native-flatlist