react-virtualized:解决react渲染长列表卡死的问题
问题:因为公司的业务需要,一个页面需要展示1000条数据,用antd去渲染的话会造成页面卡死。
解决办法:react-virtualized来替代antd的table。
react-virtualized:https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md
解决原因:
页面卡死是因为js渲染了太多的dom,而react-virtualized,只渲染了可视区的数据,非可视区的div全部被销毁。随着页面的滚动,react-virtualized会不停的渲染可视区的dom,非可视区的dom被销毁。所以整个页面的DOM并没有因为数据的过于庞大而变得非常多,解决了页面卡死的问题。
注:代码改日贴