ReactJS處理狀態很多的數據

Question

我有一個需要處理大量數據的React應用程序。總的來說這是一個簡單的應用：

• 頭有幾個環節
• 搜索欄
• 表

美中不足的是，具體取決於正在搜索什麼......表需要顯示多達1,000行約100列。當http請求返回這個數據並設置狀態時，應用程序幾乎變得不可用。在包含該數據之後，任何其他更新狀態的嘗試都會導致永久性或崩潰瀏覽器。即使當我將表格限制爲顯示20行x 100列時，狀態更新速度也顯着加快，但仍然可以更新。

我試圖在網上找到一個很好的解決方案，並提出了很短的任何想法/幫助/建議，歡迎。如果REDX有幫助，我沒有什麼問題可以實現，如果沒有回報，我只是不想浪費時間。

Answer 1

無論何時鍵入內容，您都可能會重新呈現整個表格以及搜索欄。也許嘗試將表放入實現shouldComponentUpdate()的子組件中。表格數據是否應該在輸入字符時動態更新？這可能是昂貴的，您也可以考慮只有在用戶通過輸入單擊「搜索」按鈕時重新呈現表格。

雖然我不推薦使用React performance tools *，但是不想在布什試圖弄清楚它是否是渲染問題。 Benchling有a solid blog post，這篇文章介紹了React中的性能調試過程，但是神奇的是Perf.printWasted()。它會告訴你在渲染之後花費了多少時間重新渲染組件（例如，當你只是改變文本輸入時的表格）。測試步驟：

1. 從控制檯運行：Perf.start()
2. 輸入您的輸入，最好只有一個按鍵
3. 控制檯：Perf.stop()
4. 控制檯：Perf.printWasted()

這種方法是超無痛，但你也可以use the Chrome profiling tools找出相同的信息。 *我剛剛發現他們已經在熱門的React 16中被棄用了，但是你仍然可能仍然使用15.x版本，這很好地工作。

此外，+1爲反應虛擬化！它非常出色，支持許多列和佈局。

Answer 2

如果我正確地理解了你，你的問題不是數據量 - 在DOM渲染中的問題。

我認爲最適合您的解決方案是渲染表格的可見部分。例如嘗試使用this library或類似的。