使用动态高度列表时的元素重叠

Question

在渲染它的提要时，我遇到了与 Facebook 几乎相同的问题。一旦渲染了很多帖子，就会出现性能问题。经过一些研究，我发现 react-virtualized 非常棒，但我无法让它适用于我的应用程序。

这些是我面临的问题：

1. 由于每个帖子都可以嵌入 iframe 或图像，因此一旦加载了这些项目，我就会从 CellMeasurer 触发 measure 回调。因此，某些项目似乎未对齐。每次调用 measure 回调时，我都尝试执行 parent.measureAllRows() 和 parent.recomputeRowHeights() 以查看它是否会修复它，但它没有。
2. 每个帖子都有一个可展开的部分，因此我需要重新计算它的高度。除了将 props 发送到组件之外，还有其他选择吗？

这是设置：

class VirtualPostList extends React.PureComponent {
  constructor(props, context) {
    super(props, context);
    this._cache = new ReactVirtualized.CellMeasurerCache({
      fixedWidth: true,
      defaultHeight: 400
    });
    this.rowRenderer = this.rowRenderer.bind(this);
  }


  rowRenderer({index, isScrolling, key, parent, style}) {
    return (
      <ReactVirtualized.CellMeasurer
        cache={this._cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}>
        {({measure}) => (
          <div key={key} style={style}>
            <Post onLoad={measure}/>
          </div>
        )}
      </ReactVirtualized.CellMeasurer>
    )
  }

  componentDidUpdate(){
    this.listComponent.recomputeRowHeights();
  }

  render() {
    const cache = this._cache;
    const rowCount = this.props.posts.length;
    const _this = this;
    return (
      <ReactVirtualized.WindowScroller>
        {({height, isScrolling, onChildScroll, scrollTop}) =>
          <ReactVirtualized.AutoSizer disableHeight>
            {({width}) =>
              <ReactVirtualized.List
                autoHeight
                isScrolling={isScrolling}
                height={height}
                width={width}
                rowCount={rowCount}
                deferredMeasurementCache={cache}
                rowHeight={cache.rowHeight}
                rowRenderer={this.rowRenderer}
                scrollTop={scrollTop}
                onScroll={onChildScroll}
                ref={(listComponent) => _this.listComponent = listComponent}
              />
            }
          </ReactVirtualized.AutoSizer>}
      </ReactVirtualized.WindowScroller>
    )
  }
}

重叠示例：

Answer 1

正如@brianvaughn 建议的那样，我并没有在我应该在每个地方调用measure 方法。这些变得有点样板且难以维护，因为元素不仅具有图像，而且可以自行扩展或收缩。

因为我想避免手动调用 measure，所以我像 ReactMeasure 一样将 ResizeObserver 附加到组件。之后，我把rowRenderer函数改成这样：

  rowRenderer({index, isScrolling, key, parent, style}) {
    return (
      <ReactVirtualized.CellMeasurer
        cache={this._cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}>
        {({measure}) => (
          <div key={key} style={style}>
            <ResizeObservable onResize={measure}>
              <Post/>
            </ResizeObservable>
          </div>
        )}
      </ReactVirtualized.CellMeasurer>
    )
  }

如您所见，每次调整大小时都会调用 measure 函数。这还包括加载图像或 iframe 的时间，因此无需手动调用它们