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

Question

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

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

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

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

Вопросы:

Всегда ли повторный рендеринг компонента, присоединенного к сцене в Reaction-Konva, всегда вызывает перерисовку всего на текущем холсте или делает отслеживать реакцию-konva?

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

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

Answer 1

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

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

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

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

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