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

Question

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

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

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

当组件安装时，我从 api 调用中获取数据，如下所示 -

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

现在我要做的是将我的主机和队列分别存储在我的 redux 存储中，如下所示 -

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

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

其中info是从 api 调用收到的 object，如上所示。 现在我将这两个从redux存储映射到默认屏幕组件，这样 -

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都存在于屏幕的同一组件 (React.Component) 中，并显示在屏幕的不同部分（屏幕底部的队列和屏幕顶部的主机）。 队列和主机也是相互独立的。 屏幕看起来像这样

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

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

Answer 1

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

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