Блог

Главная - Вопросы по программированию - Реагировать: поддерживать смонтированный дорогостоящий компонент

Реагировать: поддерживать смонтированный дорогостоящий компонент

#reactjs #google-maps #react-router #react-router-dom

#reactjs #google-карты #реагировать-маршрутизатор #реагировать-маршрутизатор-dom

Вопрос:

У меня есть одностраничное приложение с маршрутизатором React amp; React. Одна страница содержит компонент Google Maps, создание которого обходится дорого (7 долларов за 1000 экземпляров), поэтому, когда пользователи перемещаются туда и обратно, это приводит к затратам.

Моя идея состояла бы в том, чтобы создать компонент Maps где-нибудь в глобальном масштабе и каким-то образом внедрить его в систему PageComponent on mount, чтобы один и тот же экземпляр можно было использовать повторно. Есть какие-нибудь идеи, если и как этого можно достичь?

Ответ №1:

В старом проекте я сделал нечто подобное: на этапе размонтирования компонента вы можете переместить узел карты (поэтому здесь используется ванильный JavaScript DOM API… нет реакции) внутри другой заметки DOM (скрытой).

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

Возможно, после этого вам потребуется запустить какое-либо событие перерисовки карты (возможно resize , достаточно запустить событие window).

Комментарии:

1. Разве это не противоречит виртуальному DOM React? Я думаю, я мог бы добавить узел DOM где-нибудь, используя JavaScript API, но я не вижу способа вернуть управление React? 🤔

2. Нет, пока вы не коснетесь узлов, которые ожидают, что React будет там. Вы не можете изменять узлы, созданные с помощью React (вы получите ошибки, если сделаете это), но его не волнуют узлы, созданные сторонним JavaScript, даже если они находятся внутри дерева React DOM.

3. @hendra ах! Теперь я вижу кое-что, что я пропустил из вашего вопроса. Это работает, если ваша реализация map не основана на react… или, по крайней мере, он использует другой ReactDOM.render вызов (то есть совершенно другое приложение React, в котором вы не можете делиться информацией)

4. Да, на данный момент я использую @react-google-maps / api, но я мог бы рассмотреть возможность использования ванильного js для карты и маркеров. Спасибо!