react长列表性能优化react-window实际应用

1:最近在用react做沟通项目，由于业务原因，后端返回得聊天室列表和聊天室成员列表，都未做分页。测试在进行性能压测得时候，聊天室/成员过多，都会导致滚动很慢，当数据量过大得时候，还会出现秒级得卡顿，很影响用户体验。在网上看了很多资料，我就把自己在项目中得实际应用做成demo分享给大家

一：包得安装

npm i react-window --save

npm i @types/react-window --save

个人建议这两个命令都执行一下，不然包装得不全，如果正常安装可以忽略。

二：代码案例

我自己做了一个demo，生成一个20000人的列表，本地没有在组件身上做太多事情，所以不是特别明显的卡顿，但还是可以感受到不是那么流畅。下面演示优化改进后的代码。

引入包：

 

 

 

 

演示：

 可以看到滚动条只有一点，组件只加载了肉眼看的到的部分，（可视区域加载..）,这样就减少了组件渲染的压力。避免卡顿问题。收尾，后续会更新更多关于react相关知识，谢谢观看。