У меня была возможность настроить приложение для Android, использующее react-native-maps. Я потратил некоторое время на поиск в Google и смог значительно улучшить производительность! Сначала приложение работало со скоростью 0–15 кадров в секунду на основе встроенного в приложение «Show Perf Monitor». Я смог довести это значение до 30–59 кадров в секунду с помощью этих улучшений производительности.
onRegionChangeComplete
Одним из заметных приростов производительности стало переключение с использования свойства onRegionChange на onRegionChangeComplete.
onRegionChange обновляет положение карты, когда пользователь прокручивает и масштабирует. Представьте, что каждый раз, когда вы проводите пальцем или щипок, вызывается функция RegionChange. Это может вызвать некоторое отставание и заикание, если пользователь быстро выполняет свои действия.
onRegionChangeComplete вызывается только тогда, когда пользователь перестал взаимодействовать с картой. Таким образом, пользователь может щипать и масштабировать сколько угодно, и как только он остановится, эта функция запустится.
Чистый компонент
Другой способ повысить производительность конкретного компонента - использовать чистый компонент! Они помогают уменьшить количество визуализаций в компоненте за счет выполнения определенного метода жизненного цикла. Этот метод жизненного цикла называется shouldComponentUpdate ().
Обычные компоненты не реализуют shouldComponentUpdate () сами по себе. Если вы не знакомы с этим методом жизненного цикла, вот ссылка на официальную документацию React.
Чистые компоненты запускают shouldComponentUpdate (), но они только поверхностно сравнивают объекты в свойствах и состоянии. Это означает, что если ваши объекты сложные, они могут возвращать ложноотрицательный результат.
Если функция возвращает ложноотрицательный результат, возможно, потребуется использовать обычный компонент. Затем вам придется реализовать собственную версию «shouldComponentUpdate ()» самостоятельно.
TrackViewChanges
Это спасло жизнь отделу производительности. В качестве маркеров использовались не только изображения, но и пользовательские компоненты. Более сложные маркеры использовали представления с закругленными углами и компоненты текста и изображения.
Если честно, маркеры были принесены в жертву, поэтому «треки
ViewChanges ». Поскольку для параметра trackViewChanges было установлено значение false, текстовый компонент был бесполезен. Текст в маркере предоставил информацию, которая потенциально может быть обновлена после опроса запроса graphql.
Чтобы разобраться в этом подробнее, «trackViewChanges» - это логическое свойство. Если установлено значение false, маркер не будет повторно отображаться и будет статическим. Это полезно в приложениях, которым нужны только маркеры, чтобы оставаться на месте.
С этими 3 модификациями для react-native-maps я смог значительно улучшить производительность. Моя ситуация могла быть уникальной, поскольку у нас были собственные маркеры, но я все же хотел поделиться.
