Какой метод одновременного перетаскивания / перемещения объектов наиболее эффективен?

Question

Это скорее общий вопрос дизайна, чем конкретный вопрос о фрагменте кода. Позвольте мне сделать набросок:

Представьте себе холст с ломаной линией, состоящей из 3 или более точек. Каждая из этих точек имеет круговой объект в качестве перетаскиваемого маркера. Пользователь может перемещать маркер перетаскивания, действие обновляет контекст реакции, содержащий только эти 3 координаты. Новый контекст запускает перерисовку холста, обновляя полилинию и маркер перетаскивания новыми координатами, одновременно выполняя такие вещи, как "привязка к оси" и "привязка к ближайшему другому вектору" во время перетаскивания.

Я использую только функциональные компоненты (React.FC), а состояние передается там, где это необходимо, с помощью хуков.

Я использую requestAnimationFrame() в обработчике перетаскивания, чтобы отклонить обновления как можно ближе к максимальной частоте обновления клиента. Цель - оставаться на скорости 60 кадров в секунду.

Вопросы:

Всегда ли повторный рендеринг компонента, прикрепленного к сцене в react-konva, вызывает перерисовку всего на фактическом холсте или response-konva отслеживает?

Было бы целесообразно использовать ванильную Konva вместо абстракции react-konva в этом случае, чтобы избежать чрезмерной перерисовки, используя только контекст реакции для сохранения состояния после завершения действия перетаскивания?

Есть ли более эффективный способ справиться с этим вариантом использования, о котором я сейчас не знаю?

Answer 1

Когда вы повторно визуализируете компонент, он запускает внутреннее обновление внутри react-konva.

react-konva обновит реквизиты Konvaузлы. Он пытается работать умно, поэтому, если вы повторно отрендерили компонент, но свойства не изменились -Konva узлы не будут обновляться (и холст не будет отрисован).

Любое изменение реквизита вызовет перерисовку слоя (или сцены).

Можно использовать ваниль Konva вместо того react-konvaесли вы хотите иметь полный контроль и если вы хотите пропустить некоторую работу по согласованию реакции. Но это может быть сложно для больших компонентов.

Кроме того, лучше избегать использования React.Contextдля частых обновлений. Обновление контекста может вызвать множество повторных отрисовок компонентов. Так что лучше использовать простое состояние (или дажеmobx) для более быстрого обновления.