看了一些关于 react-beautiful-dnd
做性能优化的文章,然后自己也写了个 1000 多条的数据的看板做了性能测试,发现在正常的写法下,真的会非常卡。
原因
- React 是状态驱动的,状态的变化会触发 DOM 元素的渲染,所以如果一次拖拽排序改动了大量数据,就会渲染大量的元素。
- 拖拽行为以及拖拽过程中的列表位移效果都是很消耗性能的,如果在拖拽中做一些操作就会很卡。
- 为了拖拽的流畅,必须保持每秒的渲染次数。如果每次渲染需要处理的东西多了帧率不够就会显得拖动很卡。
解决方案
- 这时候就不得不提到一直老生常谈的列表渲染要为元素添加唯一的 key 值!因为是大量数据,所以如果不添加 key 每次数组排序的变化都会引起大量的虚拟 DOM 计算和重新渲染行为。
- 官方有一篇文章讲的相关优化:这个是翻译版本(个人表示不明觉厉,都说的是思路,没有具体实现。)
- 另外有一种方案非常可行,就是 Virtual List 技术。只渲染用户可见部分的元素。这个我觉得不错,后续会去尝试着做一下。
后续
目前调研的结果就是这些,等明天实际优化后再做分享。
最后
如果想知道更多 react-beautiful-dnd
相关的文章,推荐 Alex Reardon - Medium 的文章啦~
网友评论