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

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 存储到默认屏幕组件，这样 -

1. this.props.roomQueue 用于queue 和
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) 中，并显示在屏幕的不同部分(底部队列)屏幕顶部的屏幕和主机)。 queue 和 hosts 也是相互独立的。屏幕看起来像这样

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

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

Answer 1

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

这是开发人员所做的一个真正的过程，cz 在同一页面和同一方向呈现 2 个列表实际上并不意味着。您的查询有效。