看了一些关于 react-beautiful-dnd 做性能优化的文章，然后自己也写了个 1000 多条的数据的看板做了性能测试，发现在正常的写法下，真的会非常卡。

原因

• React 是状态驱动的，状态的变化会触发 DOM 元素的渲染，所以如果一次拖拽排序改动了大量数据，就会渲染大量的元素。
• 拖拽行为以及拖拽过程中的列表位移效果都是很消耗性能的，如果在拖拽中做一些操作就会很卡。
• 为了拖拽的流畅，必须保持每秒的渲染次数。如果每次渲染需要处理的东西多了帧率不够就会显得拖动很卡。

解决方案

• 这时候就不得不提到一直老生常谈的列表渲染要为元素添加唯一的 key 值！因为是大量数据，所以如果不添加 key 每次数组排序的变化都会引起大量的虚拟 DOM 计算和重新渲染行为。
• 官方有一篇文章讲的相关优化：这个是翻译版本（个人表示不明觉厉，都说的是思路，没有具体实现。）
• 另外有一种方案非常可行，就是 Virtual List 技术。只渲染用户可见部分的元素。这个我觉得不错，后续会去尝试着做一下。

后续

目前调研的结果就是这些，等明天实际优化后再做分享。

最后

如果想知道更多 react-beautiful-dnd 相关的文章，推荐 Alex Reardon - Medium 的文章啦~