Цена рендеринга элементов с использованием D3 в приложении React?

Я пытаюсь понять, как интегрировать D3 и React. В частности, я пытаюсь понять, как использовать D3 для визуализации воздействия. Как объясняется в этот отличный вопрос, и он отвечает:

[...] в настоящий момент нет отличного способа работы с React и D3 [...], это связано с тем, что в мире React вы не выполняете прямые манипуляции с DOM, а в мире d3, что единственное вы делаете.

В ответе говорится

Мне кажется, что нынешний консенсус в отношении силовых макетов и например, просто отказаться от React для этих компонентов и позволить d3 делать его вещь. Это не идеальный вариант, но он более эффективен.

Каково влияние на React, позволяя D3 заботиться о рендеринге? Будет ли это влиять только на производительность компонента с использованием D3 или других компонентов? Будет ли непосредственная манипуляция DOM с помощью винта D3 с React virtual DOM каким-то образом? Я в основном пытаюсь получить представление о цене, которую вы должны заплатить за использование D3.

Ответы

Ответ 1

Я работал над проектом (частный, к сожалению), где я использовал D3 для представления редактора UML. Все использовало манипуляцию SVG, чтобы нарисовать SVG, представляющий UML.

Логика пользовательского интерфейса редактора была реализована в уникальном элементе React (UMLEditor), используя TypeScript и D3. Вы можете передать свойства редактора, чтобы установить изменения в UML, и обратные вызовы для возврата данных. Например, вы можете перетащить UML-класс (в 60 кадров в секунду), но пользовательский интерфейс запускает только два события (перетаскивание и падение) для ответа на обратные вызовы.

Клавиша состоит в том, чтобы иметь логику и события, отделенные от манипуляций пользовательского интерфейса, и иметь небольшое количество больших элементов реакции и не так много маленьких элементов.

Он может управлять UML с примерно 4K классами в 30 кадров в секунду.

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

введите описание изображения здесь

Каждый элемент, кроме UMLEditor, оказывает небольшое влияние на производительность. Элемент UMLEditor - это сложный элемент без каких-либо проблемных детей. Каждый элемент пользовательского интерфейса внутри него визуализируется с использованием D3. Настоящий DOM UMLEditor содержит сложный элемент SVG, полностью управляемый с помощью D3.

Чтобы этот элемент взаимодействовал с React, мы передаем как реквизиты обратные вызовы для таких событий, как drag, drop, create new UML class... и один класс JavaScript со всей логикой визуализации D3.

Мы не передаем как поддержку всей конфигурации UML, так как это негативно скажется на производительности. Вместо этого, когда мы нуждались в нем для целей экспорта, класс JavaScript, переданный в качестве опоры, может дать всю конфигурацию UML с помощью метода.