React虛擬化AutoSizer +砌體不會渲染，直到調整大小

Question

我試圖綁定AutoSizer和Masonry組件反應虛擬化。我的項目列表處於狀態，並在componentDidMount（）中異步顯示。如果我使用簡單的匿名箭頭函數渲染砌體，一切都可以。但是，如果我使用「renderMasonry」之類的單獨函數，那麼在調整窗口大小並觸發重新渲染之前，我會得到一個空的結果。我不明白爲什麼AutoSizer在這種情況下不會重新渲染。 Plunkr is here https://plnkr.co/edit/fmAqp1MOzlKGP96LeDjP

Answer 1

如果我使用簡單的匿名箭頭函數渲染砌體，一切都可以。但是如果我使用像「renderMasonry」這樣的單獨功能...

這是關鍵。每次都會重新創建一個匿名函數，因此AutoSizer的shouldComponentUpdate會看到一個新值並返回true而不是false。 （靠近反應虛擬化文檔的頂部，有是一個的與此相關的一個section titled "Pure Components"。）

在這種情況下，唯一的2個屬性被傳遞到AutoSizerdisableHeight是和children。如果這兩者在渲染之間都沒有變化，那麼AutoSizer本身會認爲跳過重新渲染是安全的。

現在回想起來，我不知道這是一個很好的主意，有AutoSizer擴展PureComponent，因爲成本重新渲染它小巧混淆的可能性是很大的。話雖如此，人們常常將內聯函數用作反應虛擬化組件的子項，這樣可以避免上述問題。