reactjs – React-virtualized,滚动时List是Flickkering / laggi

发布时间：2020-12-15 20:47:23 所属栏目：百科来源：网络整理

导读：当我滚动浏览列表时,我遇到了一些问题. 还要注意底部的巨大空间. 见视频： https://vimeo.com/215349521 据我所知,我没有犯任何重大错误. 但我确实相信问题是由于CellMeasurer. Chrome版本：58.0.3029.81 class PromotionList extends Component {constructo

当我滚动浏览列表时,我遇到了一些问题.
还要注意底部的巨大空间.
见视频： https://vimeo.com/215349521

据我所知,我没有犯任何重大错误.
但我确实相信问题是由于CellMeasurer.

Chrome版本：58.0.3029.81

class PromotionList extends Component {

constructor(props) {
    super(props);

    this.cache = new CellMeasurerCache({
        defaultHeight: 100,fixedWidth: true,});

    this.rowRenderer = this.rowRenderer.bind(this);
}

componentWillMount() {
    this.props.fetchPromotionsIfNeeded();
}

rowRenderer({ index,parent }) {
    const { promotions } = this.props;
    const data = promotions.list[index];

    return (
      <CellMeasurer
        cache={this.cache}
        columnIndex={0}
        key={uuid.v1()}
        parent={parent}
        rowIndex={index}
      >
        <BlobItem
          key={uuid.v1()}
          type={BlobTypes.promotion}
          data={data}
          onClick={this.props.onItemClick}
          index={index}
        />
      </CellMeasurer>
    );
}


render() {
    const { promotions,previewSize } = this.props;

    return (
      <List
        height={300}
        width={previewSize.width}
        rowCount={promotions.list.length}
        deferredMeasurementCache={this.cache}
        rowHeight={this.cache.rowHeight}
        rowRenderer={this.rowRenderer}
        className="blobList"
      />
    );
}
}

阅读完文档后找到解决方案.
只需要在“rowRender”方法中添加样式：

rowRenderer({ index,parent,style }) {
  const { promotions } = this.props;
  const data = promotions.list[index];

  return (
    <CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={uuid.v1()}
      parent={parent}
      rowIndex={index}
    >
      <BlobItem
        key={uuid.v1()}
        type={BlobTypes.promotion}
        data={data}
        onClick={this.props.onItemClick}
        index={index}
        style={style}
      />
    </CellMeasurer>
  );
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!