我正在尝试在 react 虚拟化中绑定(bind) AutoSizer 和 Masonry 组件。我的项目列表处于状态并异步出现在 componentDidMount() 中。如果我使用简单的匿名箭头函数来渲染砌体,一切都很好。但是如果我使用像“renderMasonry”这样的单独函数,我会得到一个空的结果,直到我调整窗口大小并触发重新渲染。我不明白为什么 AutoSizer 在这种情况下没有重新呈现。 Plunkr 在这里 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
会看到一个新值并返回 true 而不是 false。 (在 react 虚拟化文档的顶部附近,有一个与此相关的 section titled "Pure Components"。)
在这种情况下,仅有的 2 个属性被传递给 AutoSizer
是 disableHeight
和 children
。如果这些在渲染之间都没有变化,那么 AutoSizer
本身将假定跳过重新渲染是安全的。
事后看来,我不确定让 AutoSizer
扩展 PureComponent
是个好主意,因为重新渲染它的成本很小,而且有可能困惑很大。话虽如此,人们通常将内联函数用作 react 虚拟化组件的子项,这可以避免上述问题。
关于javascript - React Virtualized AutoSizer + Masonry 在调整大小之前不会渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45895831/