React DnD 性能与许多放置目标

Question

我花了几天时间试图了解为什么在某些情况下，我的 React 应用程序中的拖放（使用 React DnD）如此缓慢。

更准确地说，问题不在于我拖动一个元素时，而是当我开始拖动它时：我单击并处理单击一个元素并移动我的光标，它可能需要元素出现在我的光标下前 10 秒。拖动本身有点滞后但可以接受，这不是问题。

我终于发现它会随着掉落目标数量的增加而变慢。例如，我可以在屏幕上放置 50 个组件，每个组件不是一个而是两个放置目标，因为我将其作为“顶部放置目标”和“底部放置目标”处理，因此您可以将元素放置在其上方或下方取决于你的光标在哪里。只需消除其中一种可能性，性能就会大幅提升。

我猜这个问题来自这样一个事实，当我开始拖动时，DnD 层会搜索所有可能的放置目标的组件并......对它们进行处理（使用 connect.dropTarget() 函数）。

有没有办法避免这种情况，或者这正是 DnD 起作用的原因？就像，我可以在悬停时检测到放置目标，而不是在我开始拖动元素时全部加载它们吗？例如，当它们悬停时，我仍然需要更改它们的样式。

顺便说一句，我还在使用旧的装饰器 API，新的钩子 API 会提高性能吗？

谢谢。

Answer 1

我终于发现随着掉落目标数量的增加，它变得越来越慢。

当我开始使用react-dnd 时，这也是我的第一个想法：为每个放置位置设置一个单独的放置目标。和你一样，我发现这存在严重的性能问题。

我意识到我只需要一个覆盖大部分屏幕的放置目标。当一个项目被丢弃时，您可以使用DropTargetMonitor#getClientOffset() 等监控函数计算该项目在放置目标中的放置位置。如果您需要对放置的项目进行离散定位，您可以轻松地将其捕捉到最接近您首选网格图块大小的倍数。