反应虚拟化的 CellMeasurer 如何重新渲染具有动态高度的连接组件?
How can the react-virtualized CellMeasurer re-render connected components that have dynamic height?
react-virtualized 项目使我能够高效地渲染一个非常大的组件列表。在我的项目中,列表项是容器组件,即连接到 redux 存储的组件。他们只知道自己的 ID,容器组件负责获取所有相关数据,例如正文、日期、用户名等。
我面临的问题是计算这些组件的高度。 React-virtualized 有一个 CellMeasurer component 用于计算动态高度,但是 CellMeasurer 测量组件默认状态的高度,在我的容器组件中为 0,因为容器组件在它时尚未获取数据第一次渲染。
有没有办法在容器加载内容时强制重新计算组件高度?
react-virtualized 积极缓存测量和位置数据以提高性能。它提供了一个 API 来重置特定行或列的数据。 :)
您可能会发现 this demo 浏览一下很有用。它强调的关键部分是 - 如果行(或列)的大小可能发生变化 - 您需要首先让 CellMeasurer
知道重新测量该行。 resetMeasurements
重置所有测量值,但如果只有一行发生更改,则使用 resetMeasurementForRow(index)
(或者,您猜对了,resetMeasurementForColumn(index)
)性能更高。
接下来您需要让 List
(或 Table
或 Grid
)知道大小也发生了变化 - 因为大小会影响位置并且这些组件会缓存位置数据。如果您使用 Table
或 List
,那么您要使用的方法是 recomputeRowHeights(index)
。如果您使用的是 Grid
那么它将是 recomputeGridSize ({ columnIndex, rowIndex })
.
react-virtualized 项目使我能够高效地渲染一个非常大的组件列表。在我的项目中,列表项是容器组件,即连接到 redux 存储的组件。他们只知道自己的 ID,容器组件负责获取所有相关数据,例如正文、日期、用户名等。
我面临的问题是计算这些组件的高度。 React-virtualized 有一个 CellMeasurer component 用于计算动态高度,但是 CellMeasurer 测量组件默认状态的高度,在我的容器组件中为 0,因为容器组件在它时尚未获取数据第一次渲染。
有没有办法在容器加载内容时强制重新计算组件高度?
react-virtualized 积极缓存测量和位置数据以提高性能。它提供了一个 API 来重置特定行或列的数据。 :)
您可能会发现 this demo 浏览一下很有用。它强调的关键部分是 - 如果行(或列)的大小可能发生变化 - 您需要首先让 CellMeasurer
知道重新测量该行。 resetMeasurements
重置所有测量值,但如果只有一行发生更改,则使用 resetMeasurementForRow(index)
(或者,您猜对了,resetMeasurementForColumn(index)
)性能更高。
接下来您需要让 List
(或 Table
或 Grid
)知道大小也发生了变化 - 因为大小会影响位置并且这些组件会缓存位置数据。如果您使用 Table
或 List
,那么您要使用的方法是 recomputeRowHeights(index)
。如果您使用的是 Grid
那么它将是 recomputeGridSize ({ columnIndex, rowIndex })
.