标签: react-virtualized

来自react-virtualised的组件InfiniteLoader 需要将属性loadMoreRows传递给具有签名的函数{ startIndex: number, stopIndex: number }): Promise.我在我的项目中使用redux,所以loadMoreRows是这样的redux动作创建者:

const fetchEntities(start, stop) {
  return fetch(`${myUrl}&start=${start}?stop=${stop}`)
}
const loadMoreRows = ({ startIndex, stopIndex }) => {
  return (dispatch, getState) => {
    return function(dispatch) {
      return fetchEntities(startIndex, stopIndex).then(
        items => dispatch(simpleAction(items)),
        error => console.log(error)
      )
    }
  }
}

之后,使用react-redux中的connect函数将此操作连接到包含InfiniteLoader的react组件.

所以我不确定,我怎样才能满足签名要求,因为redux动作创建者不会返回任何值/

看起来 React-Virtualized 不支持开箱即用的动画，但是是否有可能（并且合理？）ReactCSSTransitionGroup用于实现转换？

就我而言，我想在虚拟化列表中的元素上执行移除动画（例如，淡入淡出不透明度或缩小高度）过渡。

我在StackOverflow上经历了很多答案.我在这里也经历了List文档,react-virtualized/List.但是,我仍然无法理解如何在react-virtualized List中动态设置行高.如何计算rowHeight道具功能的高度？

我可以称我的功能为rowHeight={({ index }) => this.computeRowHeight({ index })}.但是该函数将如何计算行高？

以下是供参考的代码.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AutoSizer, InfiniteLoader, List } from 'react-virtualized';
import _ from 'lodash';

class InfiniteList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: props.list,
      loading: false
    };
  }
  componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/comments')
      .then((response) => {
        response.json().then((data) => {
          this.setState({
            list: _.concat(this.state.list, _.map(data, 'body')),
            loading: false
          });
        });
      });
  }
  isRowLoaded({ index }) …

我使用 react-virtualized Table 来渲染一个包含多行的表。由于固定的列宽，我不希望我的长文本被修剪，所以我想使用 CellMeasurer 来动态测量宽度。

这是一个使用 Grid 的示例。它工作正常。

render() {
  const {width} = this.props;

  return (
  <Grid
    className={styles.BodyGrid}
    columnCount={1000}
    columnWidth={this._cache.columnWidth}
    deferredMeasurementCache={this._cache}
    height={400}
    overscanColumnCount={0}
    overscanRowCount={2}
    cellRenderer={this._cellRenderer}
    rowCount={50}
    rowHeight={35}
    width={width}
  />
  );
}

但无论是Table也Column有deferredMeasurementCache道具。我当前的代码如下所示：

return (
    <div>
      <AutoSizer disableHeight>
        {({width}) => (
          <Table
            ref="Table"
            disableHeader={disableHeader}
            headerClassName={styles.headerColumn}
            headerHeight={headerHeight}
            height={height}
            noRowsRenderer={this._noRowsRenderer}
            overscanRowCount={overscanRowCount}
            rowClassName={this._rowClassName}
            rowHeight={useDynamicRowHeight ? this._getRowHeight : rowHeight}
            rowGetter={rowGetter}
            rowCount={rowCount}
            scrollToIndex={scrollToIndex}
            sort={this._sort}
            sortBy={sortBy}
            sortDirection={sortDirection}
            width={width}>
              <Column
                label="Index"
                cellDataGetter={({rowData}) => rowData.index}
                dataKey="index"
                disableSort={!this._isSortEnabled()}
                width={60}
              />
              <Column .../>
          </Table> …

我一直在用 Electron (Chrome) 和 React 实现一个聊天客户端。我们的首要任务是速度。因此，我们应该使用虚拟化列表组件（也称为“缓冲渲染”或“窗口渲染”）。我们已经探索了 react-virtualized、react-window 和 react-infinite 等。

所有这些组件的一个共同点是，如果支持可变高度的列表元素，则需要提前知道高度。现在，有些聊天很长，有些很短，这对我们来说是一个挑战。（由于 EXIF 数据和 ffprobe，图像和视频很容易）。

因此，我们面临着测量高度的挑战，同时也竭力追求卓越的性能。一种明显的技术是将元素放在浏览器容器中，离开视口，执行测量，然后呈现列表。但这在性能要求方面伤害了我们。像 react-virtualized/CellMeasurer（不再由原作者维护）和 react-window 之类的软件使我们采用了这种技术，内置于库中，但性能有点慢且不可靠。一个可能更高效的类似想法是使用后台电子浏览器窗口来进行渲染和测量，但我的直觉是这不会更快。

我认为必须有一些解决的方法可以根据自动换行、最大宽度和字体规则提前确定字符串高度。

我目前的想法是使用像string-pixel-width这样的库，以便在我们通过 API 获取文本数据后立即计算行高。基本上，该库使用这段代码来生成字符宽度 [*] 的映射。然后，一旦我们知道每个文本的宽度，当它最大化计算出的最大行宽时，我们将每行分开，最后通过行数推断列表元素的高度。由于断字，它需要一点点算法摆弄，但有库可以帮助解决这个问题 - css-line-break似乎很有希望。

[*] 我们将不得不稍微修改它以考虑所有 Unicode 字符范围，但这是微不足道的。

我还没有完全探索的一些选项包括 python weasyprint 项目和 facebook-yoga 项目。我愿意接受你的想法！

是否可以将反应虚拟化和酶一起使用？当我尝试一起使用它们时,我似乎在网格中得到一个空列表.

我List在react-virtualized中使用一个组件来渲染大量项目.在我的实现中,项目是分段的,我希望部分标题是粘性的,以便当用户向下滚动时当前部分保持可见.从本质上讲,我需要react-virtualized NOT来销毁部分标题,因为滚动位置会发生变化(但会继续破坏其他项目).现在有办法做到这一点吗？只要他们不是太疯狂,我就会对黑客持开放态度.

我试图InfiniteLoader从react-virtualize库中使用来显示textSearch顶部有一个输入字段的可滚动列表（用于过滤列表条目）。

我使用的代码与InfiniteLoader Sample Code非常接近。该列表工作正常，但我不确定如何InfiniteLoader在searchText更改时重置/初始化并显示（完全）新数据。

流程是这样的：

1. 该列表是第一次打开并显示来自redux store（工作正常）的数据。
2. 用户更改textSearch和新数据被提取到store
3. 在这一点上，InfiniteLoader应该进行初始化（我打过电话resetLoadMoreRowsCache上InfiniteLoader）
4. InfiniteLoader应该loadMoreRows第一次调用like 并使用新数据重新渲染

我已经看到INFINITELOADER DEMO具有相同的行为：通过单击“刷新缓存数据”，在我开始整理列表之前没有任何反应。

所以我的问题是：重置/初始化的正确方法是什么？

我有一个像这样的反应虚拟化列表（使用 List 组件）：

renderItem = ({ index, key, style }) => {
  const {
    entries,
    projectId,
  } = this.props;
  const entry = entries[index];

  return (
    <div key={key} style={style}>
      <MyItem
        entry={entry}
        entryIndex={index}
        projectId={projectId}
      />
    </div>
  );
}

<List
  rowHeight={75}
  rowRenderer={this.renderItem}
  rowCount={entries.length}
  width={780}
  height={1000}
/>

MyItem连接到一个 redux store 并且可以交互。但是，在我滚动列表之前，它不会反映屏幕上的任何更改，一旦我滚动，我就会看到列表项，因为它应该与更新一起MyItem's render()被调用。

当道具更改时，如何进行反应虚拟化以重新呈现列表项？

我一直在努力实现这个例子中提到react-sortable-hoc的例子页面，特别是与表内自动滚屏的行为。不幸的是，源代码看起来并不存在于存储库的示例目录中。

尽管我在下面的代码和框中实现的代码是一个非常简单的示例，但我已经为此倾注了数小时，使用useWindowAsScrollContainer和getContainer使用 refs，但似乎没有任何解决问题的方法。

也就是说，这是我注意到的行为：当滚动出容器，甚至出窗口时，自动滚动功能永远不会参与。我甚至使出回document.body与getContainer应限制容器，但似乎无法复制的行为所指出的资源库的例子。

此外，虽然我在SortableTable组件上指定了固定的高度和宽度<AutoSizer />，但理想情况下应该用 包裹，但暂时将其删除以消除任何副作用。

https://codesandbox.io/s/mysortabletable-zi94g?file=/MySortableTable.js

• react-sortable-hoc : 1.11.0
• 反应虚拟化：9.7.5