React Virtualized AutoSizer + Masonry 在调整大小之前不会渲染

Question

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

Answer 1

如果我使用简单的匿名箭头函数来渲染 Masonry，则一切正常。但是如果我使用像“renderMasonry”这样的单独函数......

这是关键。每次都会重新创建一个匿名函数，因此AutoSizer's 会shouldComponentUpdate看到一个新值并返回 true 而不是 false。（在 react-virtualized 文档的顶部附近，有一个标题为“Pure Components”的部分与此相关。）

在这种情况下，传递给的仅有 2 个属性AutoSizer是disableHeight和children。如果这些在渲染之间都没有改变，那么AutoSizer它本身就会认为跳过重新渲染是安全的。

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