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并没有因为数据的过于庞大而变得非常多,解决了页面卡死的问题。

注:代码改日贴

posted on 2018-12-02 23:25  JJoan  阅读(1679)  评论(0编辑  收藏  举报

导航