Как использовать React и Solid-JS вместе?

Мы переносим наше веб-приложение сReactкSolidJS. Мы хотим вносить изменения постепенно, конвертируя страницы по одной.

я использовалastroдля запуска обоих и .
Проблема, с которой я столкнулся, заключалась в навигации междуreactстраницы иsolidjsстраницы, так как они используют разные маршрутизаторы (react-router-domиsolid/router).

Как я могу перемещаться между этими двумя библиотеками пользовательского интерфейса?

1 ответ

React использует виртуальный DOM и перерисовывает все дерево DOM при каждом обновлении состояния. Чтобы уменьшить объем работы, он разделяет и группирует ранее отрендеренные ветки.

Solid визуализирует компоненты в фактические элементы DOM, и есть различия или пакетная обработка, но некоторые встроенные методы/компоненты сохраняют ссылки на объекты, чтобы уменьшить количество повторных вычислений, если связанная ветвь состояния не изменилась, т.е.mapArray,indexArray,ForиIndex. Это ближе к кэшированию, чем к различению и пакетной обработке.

Таким образом, смешивание и сопоставление на уровне компонентов будет трудно обосновать и, безусловно, будет неоптимальным с точки зрения производительности. Я считаю, что лучший вариант — разделить работу на корневом уровне и перенести все компоненты корневого уровня целиком.

Чтобы сделать это более конкретным, скажем, у вас есть три пути в вашем маршрутизаторе:

  • /дом
  • /контакт

Итак, у вас будет три компонента корневого уровня:

  • Дом
  • Контакт
  • О

Миграция каждого из них по одному будет чище и эффективнее.

Однако, если ваше приложение сложное или его трудно разделить на корневом уровне, или если вы не хотите поддерживать несколько маршрутизаторов, используйте Solid-js для рендеринга компонентов корневого уровня, потому что это будут фактические элементы DOM, и смонтируйте React. компоненты, несущие старую логику поверх них. Таким образом, у вас будет несколькоReactDOM.renderвызывает монтирование устаревших компонентов на элементы DOM, изначально обработанные solid-router. Я думаю, что это будет лучший вариант действий.

Другие вопросы по тегам