在 React 中上傳列表 state 管理

Question

我正在處理一個看起來有點像這樣的 UploadList 組件。

列表中的每一項都是一個上傳組件。 我想知道如何管理整個 UploadList 的 state。 顯然我可以有一個這樣的 state。

[
  { fileName: 'File 1', progress: 'uploaded'},
  { fileName: 'File 2', progress: 'uploaded'}
  { fileName: 'File 3', progress: 60}
  { fileName: 'File 4', progress: 45}
  { fileName: 'File 5', progress: 'queued'}
  { fileName: 'File 6', progress: 'queued'}
]

但我預計列表會很長，比如 100 項，並且最多會有 2 個正在進行的上傳。 即使使用所有虛擬 DOM React 魔法，重新渲染整個 UploadList 只是為了改變一個項目的進度對我來說似乎很浪費。 正在進行的上傳可能非常快，並且整個組件將不斷重新渲染。

上述方法是標准方法嗎，我只是過度優化了嗎？ 我非常喜歡 RxJS 用於 state 管理，並且上述方法對於整個 UploadList 只有一個 stream（可觀察）值。 RxJS 中是否有一種標准方法來分解結構，以便我可以為每個正在進行的上傳設置一個 stream，以便只有正在進行的上傳才會重新呈現？

Answer 1

您是否嘗試過將每個文件作為一個組件？ 創建一個組件 FileUploadComponent 並為上傳列表中的每個文件呈現該組件，例如：

uploadList.map((fileData) => (
<FileUploadComponent uploadProgress={fileData.uploadProgress} />))

這樣我猜只有當前正在上傳的 FileUploadComponent 會重新渲染。