2

我目前有一个项目列表，例如<ul><li/><li/>...</ul>，每个都用display: inline-block. 这些项目不是固定的高度或宽度，尽管我可以将它们固定，并且每个都包含一个缩略图，有时还包含文本。

该列表会随着窗口宽度的变化而自动换行，没有水平滚动条。例如，列表可能以 3 个项目开始，这些项目都水平放置在窗口内的一行中：

| 1 2 3     |

然后添加了更多项目，这些项目开始换行到第二行：

| 1 2 3 4 5 |
| 6 7 8     |

然后，如果窗口宽度发生变化，项目将重新包装：

| 1 2 3 4 5 6 7 |
| 8             |

当有数千个项目时，性能肯定会受到影响，所以我想看看是否有办法虚拟化列表。从我对文档的阅读来看，React Virtualized 库目前似乎不支持这一点，但我想检查一下。该Collection组件看起来可能很接近，但我认为它不希望在调整窗口大小时动态改变宽度或高度。

如果这种项目包装是可能的，是否有任何示例实现？

4

1 回答 1

4

从我对文档的阅读来看，React Virtualized 库目前似乎不支持这一点

我很想知道文档的哪一部分给了你这种印象。您的用例听起来像是一个反应虚拟化的设备可以处理。:)

该Collection组件似乎可能很接近

Collection用于其他用途。也许这些来自我最近一次会议演讲的幻灯片可以澄清一点。基本上，Collection用于非线性数据（例如甘特图、Pinterest 布局等）。它更灵活，但这是以性能为代价的。您的用例听起来非常适合List. :)

更新的答案

您可以使用ListandAutoSizer来完成此操作。您只需要使用可用宽度和项目高度来计算行数。不太复杂。:)

这是一个 Plunker 示例，源代码如下：

const { AutoSizer, List } = ReactVirtualized

const ITEMS_COUNT = 100
const ITEM_SIZE = 100

// Render your list
ReactDOM.render(
  <AutoSizer>
    {({ height, width }) => {
      const itemsPerRow = Math.floor(width / ITEM_SIZE);
      const rowCount = Math.ceil(ITEMS_COUNT / itemsPerRow);

      return (
        <List
          className='List'
          width={width}
          height={height}
          rowCount={rowCount}
          rowHeight={ITEM_SIZE}
          rowRenderer={
            ({ index, key, style }) => {
              const items = [];
              const convertedIndex = index * itemsPerRow;

              for (let i = convertedIndex; i < convertedIndex + itemsPerRow; i++) {
                items.push(
                  <div
                    className='Item'
                    key={i}
                  >
                    Item {i}
                  </div>
                )
              }

              return (
                <div
                  className='Row'
                  key={key}
                  style={style}
                >
                  {items}
                </div>
              )
            }
          }
        />
      )
    }}
  </AutoSizer>,
  document.getElementById('example')
)

初步答案

这是我会做的，或多或少：

export default class Example extends Component {
  static propTypes = {
    list: PropTypes.instanceOf(Immutable.List).isRequired
  }

  constructor (props, context) {
    super(props, context)

    this._rowRenderer = this._rowRenderer.bind(this)
    this._rowRendererAdapter = this._rowRendererAdapter.bind(this)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState)
  }

  render () {
    const { list } = this.props

    return (
      <AutoSizer>
        {({ height, width }) => (
          <CellMeasurer
            cellRenderer={this._rowRendererAdapter}
            columnCount={1}
            rowCount={list.size}
            width={width}
          >
            {({ getRowHeight }) => (
              <List
                height={height}
                rowCount={list.size}
                rowHeight={getRowHeight}
                rowRenderer={this._rowRenderer}
                width={width}
              />
            )}
          </CellMeasurer>
        )}
      </AutoSizer>
    )
  }

  _getDatum (index) {
    const { list } = this.props

    return list.get(index % list.size)
  }

  _rowRenderer ({ index, key, style }) {
    const datum = this._getDatum(index)

    return (
      <div
        key={key}
        style={style}
      >
        {datum.name /* Or whatever */}
      </div>
    )
  }

  _rowRendererAdapter ({ rowIndex, ...rest }) {
    return this._rowRenderer({
      index: rowIndex,
      ...rest
    })
  }
}
于 2016-11-08T16:22:15.297 回答