Я потратил несколько дней, пытаясь понять, почему в некоторых случаях перетаскивание (с React DnD) происходит так медленно в моем приложении React.
Точнее говоря, проблема не в том, когда Я перетаскиваю элемент, но когда начинаю его перетаскивать: я щелкаю и обрабатываю щелчок по элементу и перемещаю курсор, и может пройти до 10 секунд, прежде чем элемент появится под моим курсором. Само перетаскивание немного запаздывает, но приемлемо, здесь проблема не в этом.
Я наконец-то обнаружил, что он становится медленнее с увеличением числа целей сбрасывания. Например, у меня может быть 50 компонентов на экране, каждый из которых представляет собой не одну, а две цели перетаскивания, потому что я рассматриваю это как «верхнюю цель перетаскивания» и «нижнюю цель перетаскивания», так что вы можете опустить свой элемент выше или ниже его. в зависимости от того, где находится ваш курсор. Просто удалив одну из этих возможностей, производительность резко возросла.
Я предполагаю, что эта проблема связана с тем, что когда я начинаю перетаскивать, слой DnD ищет все компоненты, которые являются возможными объектами удаления и ... что-то делать с ними (с помощью функции connect.dropTarget ()).
Есть ли способ избежать этого или это причина, по которой работает DnD? Например, могу ли я определить опущенные цели, когда они наведены, вместо загрузки их всех, когда я начинаю перетаскивать элемент? Мне все еще нужно будет изменить их стиль, например, когда они будут зависать.
Кстати, я все еще использую устаревший API-интерфейс декоратора, улучшит ли новый API-интерфейс ловушек производительность?
Спасибо .