React Virtualized AutoSizer + Masonry在调整大小之前不会呈现

Question

我正在尝试在反应虚拟化中绑定AutoSizer和Masonry组件。我的项目列表处于状态，并在componentDidMount（）中异步显示。如果我使用简单的匿名箭头功能来渲染砌体，一切都很好。但是如果我使用像“renderMasonry”这样的单独函数，我会得到一个空结果，直到我调整窗口大小并触发重新渲染。我不明白为什么在这种情况下AutoSizer不会重新渲染。 Plunkr is here https://plnkr.co/edit/fmAqp1MOzlKGP96LeDjP

Answer 1

  

如果我使用简单的匿名箭头功能来渲染砌体，一切都很好。但是如果我使用像“renderMasonry”这样的单独函数......

这是关键。每次都会重新创建一个匿名函数，因此AutoSizer的{​​{1}}会看到一个新值并返回true而不是false。 （在反应虚拟化文档的顶部附近，有一个section titled "Pure Components"与此相关。）

在这种情况下，传递给shouldComponentUpdate的唯一2个属性是AutoSizer和disableHeight。如果这些都不会在渲染之间发生变化，那么children本身就会认为跳过重新渲染是安全的。

事后看来，我不确定让AutoSizer扩展AutoSizer是个好主意，因为重新渲染它的成本很小，而且混淆的可能性很大。话虽如此，人们常常将内联函数用作反应虚拟化组件的子项，这样可以避免上述问题。