Комментарии 4
А зачем передавать карту вот так наружу? Полагаю, правильнее было бы инкапсулировать всю работу с картой внутри того компонента, где она создается. Ведь карта - это кусок слоя представления. А если какие-то штуки в карте поменялись, например, видимый прямоугольник (и этот прямоугольник нужен для загрузки каких-нибудь поинтов), то сообщать в модель/стор об этом из компонента. И наоборот, отслеживать компонентом какие-то изменения в сторе, что-то меняя в карте.
Доступ к карте отовсюду может привести к анархии в коде.
Именно поэтому я изначально рассмотрел "классические" методы о которых Вы говорите.
В разных ситуациях удобнее использовать различные подходы.
Вы можете использовать любой метод который считаете правильным в вашем конкретном случае.
Имхо в приведенном примере компонент может оказаться слишком загруженным, так как вся синхронизация происходит через компонент. Вынос всей этой дополнительной логики за рамки компонента сделает код чище.
Можно будет убедиться в этом в моей следующей статье - Управление состоянием React приложения с mapbox-gl с использованием XState где будут показаны преимущества данного подхода.
Вовсе не обязательно делать всю логику работы с картой в самом компоненте, гораздо лучше будет, например, по onCreated создать экземпляр класса, в котором реализуется эта логика, а так же делается подписка на какое-нибудь состояние и т.д., и разместить его в ref (который useRef). Тут важно вот что: в общем случае компонент вполне может размаунтиться, и в этот момент надо будет прибить экземпляр, потому что карта - всё, и дальнейшая работа с ней не нужна. Таким образом, с одной стороны, не засоряется код компонента, с другой - карта не уехала наружу, и время жизни всего, что с ней связано, контролируется компонентом.
Хранение инстанса карты mapbox-gl вне React