Как использовать 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. Я думаю, что это будет лучший вариант действий.