react 下拉列表加载数据卡顿

我们可以利用react-virtualized库中的CellMeasurer和CellMeasurerCache组件来动态计算每一行的高度。以下是一个使用这些组件的示例代码：

import React from 'react';
import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from 'react-virtualized';

export default class VirtualizedSelect extends React.Component {
    // 我们需要创建一个 CellMeasurerCache 实例并存储，
    // 用于缓存每一行的动态高度
    cache = new CellMeasurerCache({
        fixedWidth: true, 
        //defaultHeight
        //设定了你所期待或预估的默认单元格的高度。
        //在开始测量每个单元格的尺寸之前， 
        //它能为列表提供一个初始的，可能不完全准确但相近的高度估计。 
        //这有助于首次渲染时更好地估算滚动条位置和所需渲染的列表项数量，
        //可提升初次渲染的性能和滚动体验。
        defaultHeight: 20
    });

    rowRenderer = ({ index, key, parent, style }) => {
        const { options } = this.props;
        // 获取列表项数据
	    const itemData = options[index]; 
        return (
            // 使用 CellMeasurer 组件来动态测量行高
            <CellMeasurer
                cache={this.cache}
                columnIndex={0} 
                // 根据数据变化来更新 key
                key={key + itemData.version}
                rowIndex={index}
                parent={parent}
            >
                <div style={style}>
                    {options[index]}
                </div>
            </CellMeasurer>
        );
    }

    render() {
        const { options } = this.props;
        return (
            <AutoSizer disableHeight>
                {({ width }) => (
                    <List
                        deferMeasurementCache={this.cache} // 这里我们把缓存传递给 List 组件
                        rowHeight={this.cache.rowHeight} // 使用缓存中的行高
                        width={width}
                        height={200}
                        rowCount={options.length}
                        rowRenderer={this.rowRenderer}
                    />
                )}
            </AutoSizer>
        );
    }
}

上述代码中，我们创建了一个CellMeasurerCache实例，并将其传递给List组件。CellMeasurerCache会动态地测量每一行的高度，并将测量结果缓存起来，这样我们就可以为每一行设置适合的高度。

我们在rowRenderer方法中使用了CellMeasurer组件。CellMeasurer会为其子元素计算动态尺寸，并将结果存储在CellMeasurerCache中。其接受的参数包括缓存实例、列索引、行索引和父元素。

被CellMeasurer包裹的内容就是我们需要动态测量的每一项。

如此一来，无论每项内容的高度是多少，我们都可以确保只渲染位于视口内的项，不会因为下拉列表内容过多导致页面卡顿。

在列表项内容更新时，让 CellMeasurer 自动重新测量

要让 CellMeasurer 在列表项内容更新时自动重新测量，你可以根据列表项的改变更新其 key 属性。CellMeasurer 使用 key 作为识别不同单元格的标识，当列表中某个单元格的 key 改变时，它就会被识别为一个新的单元格，CellMeasurer 会对其进行重新测量。

以下是一个例子来展示如何在列表项内容更新时更新 key：

<List 
  rowCount={data.length}
  rowHeight={cache.rowHeight}
  rowRenderer={({ index, key, parent, style }) => {
    // 获取列表项数据
    const itemData = data[index]; 

    return (
      <CellMeasurer 
        cache={cache}
        columnIndex={0}
        key={key + itemData.version} // 根据数据变化来更新 key
        parent={parent}
        rowIndex={index}
      >
        <div style={style}>
          {/* 渲染列表项的内容 */}
        </div>
      </CellMeasurer>
    );
  }}
/>

在这个例子中，我假设 data 是一个对象数组，且每个对象都含有一个 version 字段表示其版本或更新次数。当列表项的内容更新时，你可以改变其 version 使得 key 发生改变，这就会触发更新

*注意事项*
避免 CellMeasurer 嵌套使用时可能出现的复杂性主要有以下几点建议：

1. 避免嵌套使用：在可能的情况下，尽量避免嵌套使用 CellMeasurer。大多数情况下，单个 CellMeasurer 能够满足需求。

2. 合理设计数据结构：可以将复杂数据进行扁平化处理，在同一层级上渲染，这样就避免了嵌套使用 CellMeasurer。

3. 独立设置 CellMeasurerCache：如果必须要嵌套使用 CellMeasurer，尽量保证每一个 CellMeasurer 都有一个独立的 CellMeasurerCache。共享同一个 CellMeasurerCache 可能会导致测量问题。

4. 正确使用 key：如果一个列表项的内容发生改变，你需要确保它的 key 属性与之前不同，以强制 CellMeasurer 重新测量。否则 CellMeasurer 可能会使用以前的缓冲值，导致渲染出错。

5. 慎重考虑性能：记住每次使用 CellMeasurer 测量元素，无论是宽度还是高度，都会触发一次强制布局回流。在列表滚动时，频繁的强制布局回流可能使性能受到影响。这也是应尽量避免嵌套使用 CellMeasurer 的原因。

6. 充分测试：多做测试，确保在各种可能的场景下都能正常工作。虽然 react-virtualized 的单元测试覆盖了许多情况，但仍建议自行进行应用场景相关的测试。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！