使用react-window構造虛擬列表（性能優化）

1、不用全部加載出所有的DOM節點。默認只渲染可視區域及可視區域外的壹個節點，此屬性可自定義設置。

2、可用於處理大型數據列表。當使用在大型數據列表中，可避免因為數據的更新而導致大量的重新渲染。

使用AutoSizer可是列表寬高為當前父組件的100%

在使用VariableSizeList 會遇到列表項樣式緩存沒有被清除導致行高壹直和第壹次可視區域裏展示的壹樣。可使用組件的屬性resetAfterIndex(index: number, shouldForceUpdate: boolean = true): void來清除樣式。

react-window的github源碼： /bvaughn/react-window

react-window的api使用文檔： https://react-window.now.sh/#/examples/list/fixed-size

上一篇:狀元編程課最後的機器人怎麽拼

下一篇:prism3D如何導出我的素材放到其他領域？