React Virtualized AutoSizer + Masonry 在调整大小之前不会呈现
React Virtualized AutoSizer + Masonry doesn't render until resized
我正在尝试在反应虚拟化中绑定 AutoSizer 和 Masonry 组件。我的项目列表处于状态并异步出现在 componentDidMount() 中。如果我使用简单的匿名箭头函数来渲染砌体，一切都很好。但是如果我使用像 "renderMasonry" 这样的单独函数，我会得到一个空的结果，直到我调整 window 的大小并触发重新渲染。我不明白为什么 AutoSizer 在这种情况下没有重新呈现。 Plunkr is here https://plnkr.co/edit/fmAqp1MOzlKGP96LeDjP
If I use simple anonymous arrow function for rendering Masonry, everything is OK. But If I use separate function like "renderMasonry" ...
这是关键。每次都会重新创建一个匿名函数，因此 AutoSizer 的 shouldComponentUpdate 会看到一个新值，而 returns 是 true 而不是 false。 （在 react-virtualized 文档的顶部附近，有一个与此相关的 section titled "Pure Components"。）
在这种情况下，传递给 AutoSizer 的仅有 2 个属性是 disableHeight 和 children。如果这些在渲染之间都没有变化，那么 AutoSizer 本身将假定跳过重新渲染是安全的。
事后看来，我不确定让 AutoSizer 扩展 PureComponent 是个好主意，因为重新渲染它的成本很小，而且混淆的可能性很大。话虽如此，人们通常将内联函数用作反应虚拟化组件的子项，这可以避免上述问题。
我正在尝试在反应虚拟化中绑定 AutoSizer 和 Masonry 组件。我的项目列表处于状态并异步出现在 componentDidMount() 中。如果我使用简单的匿名箭头函数来渲染砌体，一切都很好。但是如果我使用像 "renderMasonry" 这样的单独函数，我会得到一个空的结果，直到我调整 window 的大小并触发重新渲染。我不明白为什么 AutoSizer 在这种情况下没有重新呈现。 Plunkr is here https://plnkr.co/edit/fmAqp1MOzlKGP96LeDjP
If I use simple anonymous arrow function for rendering Masonry, everything is OK. But If I use separate function like "renderMasonry" ...
这是关键。每次都会重新创建一个匿名函数，因此 AutoSizer 的 shouldComponentUpdate 会看到一个新值，而 returns 是 true 而不是 false。 （在 react-virtualized 文档的顶部附近，有一个与此相关的 section titled "Pure Components"。）
在这种情况下，传递给 AutoSizer 的仅有 2 个属性是 disableHeight 和 children。如果这些在渲染之间都没有变化，那么 AutoSizer 本身将假定跳过重新渲染是安全的。
事后看来，我不确定让 AutoSizer 扩展 PureComponent 是个好主意，因为重新渲染它的成本很小，而且混淆的可能性很大。话虽如此，人们通常将内联函数用作反应虚拟化组件的子项，这可以避免上述问题。