Reactjs 网格重新排序时如何避免重新计算列宽(CellMeasurer)?
我将react虚拟化网格组件用作表(固定行高,动态列宽)。表可以排序,因此数据的顺序可以更改。但每次我对表进行排序时,Grid似乎都会重新计算列宽,这需要2-5秒的无响应时间。这是不必要的,因为只有顺序已更改,而不是数据,因此以前的宽度仍然有效。我需要一些方法来告诉网格组件(或CellMeasurer组件) 这是网格的代码:Reactjs 网格重新排序时如何避免重新计算列宽(CellMeasurer)?,reactjs,react-virtualized,Reactjs,React Virtualized,我将react虚拟化网格组件用作表(固定行高,动态列宽)。表可以排序,因此数据的顺序可以更改。但每次我对表进行排序时,Grid似乎都会重新计算列宽,这需要2-5秒的无响应时间。这是不必要的,因为只有顺序已更改,而不是数据,因此以前的宽度仍然有效。我需要一些方法来告诉网格组件(或CellMeasurer组件) 这是网格的代码: <AutoSizer> {({ height, width }) => ( <Grid
<AutoSizer>
{({ height, width }) => (
<Grid
columnWidth={cache.columnWidth}
deferredMeasurementCache={cache}
cellRenderer={cellRendererGrid}
height={height}
width={width}
columnCount={3}
rowCount={orderedData.length}
rowHeight={rowHeight}
/>
)}
</AutoSizer>
orderedData的顺序可以根据用户选择的排序而改变。我希望CellMeasurer避免在orderedData更改时重新计算列宽
任何正确方向的建议或轻推都将受到赞赏
function cellRendererGrid({ columnIndex, key, parent, rowIndex, style }) {
let row = orderedData[rowIndex];
let content;
if (columnIndex === 0) content = row.score;
else if (columnIndex === 1) content = row.deactivated;
else content = row.keyword;
return (
<CellMeasurer
cache={cache}
columnIndex={columnIndex}
key={key}
parent={parent}
rowIndex={rowIndex}
>
<div
style={{
...style,
whiteSpace: "nowrap",
}}
>
{columnIndex === 1
? deleteCellRenderer({ cellData: content, rowData: row })
: cellRenderer({ columnIndex, cellData: content })}
</div>
</CellMeasurer>
);
}
[{keyword:'long text', score:number, deactivated:boolean}, ...]