在同一屏幕上处理多个平面列表

Question

当在同一个屏幕上有两个平面列表时，请帮助我处理不必要的重新渲染

我的屏幕需要两个平面列表-

1. 对于主机
2. 对于队列

当组件挂载时，我像这样从 api 调用中获取数据-

{
  "hosts": [{"id":"1", "name":"kyouma"},...],
  "queue": [{"id":"99", "name":"eren"},...]
}

现在我要做的是像这样将我的 hosts 和 queue 分别存储在我的 redux 存储中-

this.props.dispatch({
        type: GET_ROOM_HOSTS,
        payload: info['hosts']
      })

this.props.dispatch({
        type: GET_ROOM_QUEUE,
        payload: info['queue']
      })

其中 info 是从 api 调用接收到的对象，如上所示。现在我ma​​pStateToProps这两个从redux store到默认的screen组件这样-

1. this.props.roomQueue 用于队列和
2. this.props.roomHosts 用于主机

我的FlatList的是这样的-

<FlatList
   data={this.props.roomQueue}
   horizontal={true}
   keyExtractor = {item => item.id}
   renderItem({item} => {
    return(
        <customComponent (with suitable props) ..../>
        )
    })
/>

<FlatList
   data={this.props.roomHosts}
   numColumns={3}
   keyExtractor = {item => item.id}
   renderItem({item} => {
    return(
        <customComponent (with suitable props) ..../>
        )
    })
/>

请注意这两个 FlatList's 都存在于屏幕的同一个组件 (React.Component) 中，并显示在屏幕的不同部分（底部的队列）屏幕和屏幕顶部的主机）。 queue 和 hosts 也是相互独立的。屏幕是这样的

我的问题是，即使 this.props.roomQueue 发生变化，具有 data={this.props.roomHosts} 的 FlatList 也会重新渲染。

如何防止这种重新渲染，以确保只有当FlatList的对应数据发生变化时，才会重新渲染，否则不会。我是否必须更改存储 queue 和 hosts 的方式？还是有别的？

Answer 1

您可以只使用一个平面列表来做到这一点。将两个数组合并为一个并显示一个列表中的结果..您可以在 ui 中使用类型将它们保留。

这是真正的开发者做的程序，cz在同一个页面和同一个方向上渲染2个列表根本不是什么意思。您的查询有效。