使用 React 和 Redux 處理數據密集型請求的最佳方法是什么？

Question

我的大部分頁面本質上是一個包含 40-100 個組件的列表，每個組件包含大約 11 KB 的數據（采用 JSON 格式）。 問題是 11 KB 的 100 乘以 1.1 MB，對於舊移動設備上的瀏覽器而言，這似乎有點過於占用內存，無法以 Redux 狀態存儲。 它使我華麗的 CSS 動畫看起來斷斷續續，按鈕需要大約一秒鍾來切換開/關狀態。

因為每個組件的高度正好是 148 像素，所以我的第一個想法是使用虛擬列表 (Virtuoso)，它一次只渲染屏幕上可以容納的盡可能多的項目（就像 5-8 個頂部）。 這使得第一次渲染速度更快，但沒有使動畫更流暢，這無疑證實了這主要是內存問題。

所以，如果我不能在狀態對象中存儲和保留我的所有數據，那么我需要做一些類似於 Virtuoso 的事情，並且只保留渲染當前屏幕所需的盡可能多的數據。 現在，我不太確定 Redux 在內部是如何工作的，但是如果狀態是不可變的，那是不是意味着所有到達那里的東西都會留在那里？ 難道這不意味着我正在嘗試做一些不可能的事情，或者至少是反模式？

哦，更糟糕的是，數據需要每 3 秒更新一次，這意味着組件有時會消失，只有在下次更新時才會重新出現。 我還沒有測試這將如何影響 Virtuoso 滾動，但我並不完全期望完美的即插即用行為。

我很感激關於如何使用 redux 和（可能）它的中間件解決這個問題的想法，因為它是我熟悉 atm 的唯一架構，切換到例如 Flux 意味着必須從頭開始學習它並重寫大約 2000 行 redux 代碼.

Answer 1

我從未使用過 Virtuoso、react-virtualized 或 react-window，但這看起來是您可以使用其中一個庫來解決的問題。

你的 React 應用程序的其他部分是否關心你在列表中呈現的數據？

• 如果沒有，把數據放在這個組件的本地狀態而不是 Redux 中。
• 如果他們這樣做了，也許嘗試在組件掛載時在 localStorage 中設置這個巨大的列表，在卸載時取消設置它，並使用組件的本地狀態來選擇開始/結束索引來選擇數據的一部分。

另見： https : //blog.jakoblind.no/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/