在同一屏幕上處理多個平面列表

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個列表實際上是沒有意思的。 您的查詢有效。