Размонтирование 30k + компонентов происходит медленно - PullRequest
Новая
       72

Размонтирование 30k + компонентов происходит медленно

3 голосов
/ 05 августа 2020

У меня есть карта с примерно 30k + интерактивными маркерами и рядом фильтров для них. Всякий раз, когда я выбираю фильтр и нажимаю «Применить», выполняется вызов API для получения отфильтрованных данных. Теперь проблема в том, что существующие более 30 тысяч маркеров будут удалены (отключены) и будут заменены новыми отфильтрованными данными из вызова API. Эта операция размонтирования приводит к зависанию пользовательского интерфейса примерно на 10+ секунд и, наконец, отображение отфильтрованных данных. Я даже не могу показать счетчик, когда происходит такая операция.

Как оптимизировать монтирование и размонтирование такого большого набора данных ?. Я использовал все оптимизации рендеринга, такие как React.memo () и тому подобное, но проблема связана с первоначальным рендерингом и одновременным удалением таких больших данных. 

`<Map
     ref={mapRef}
     center={latlng}
     zoom={14}
     minZoom={12}
     preferCanvas={true}
  >
  <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright" target="_blank" rel="noopener noreferrer">OSM</a>'
      url={`${OSM_URL}/tile/{z}/{x}/{y}.png`}
   />
   <MarkerClusterGroup chunkedLoading={true} chunkInterval={500}>
       <MarkerList markers={mydata} showInfoPopup={showInfoPopup} />
    </MarkerClusterGroup>
</Map>`

Я учел:

  1. Использование display: none вместо размонтирования. Но это не решит проблему первоначального монтирования, и это невозможно для компонентов маркера.
  2. Выгрузка рендеринга в рабочий поток. (Не знаю, возможно ли это в React - лучший способ)
  3. Используйте простые старые элементы DOM, а не компоненты React, но это не кажется оптимальным

Любые инструкции о том, как приветствуется обработка такого большого набора данных.

1 Ответ

0 голосов
/ 23 августа 2020

Мне удалось использовать метод clearLayers из Leaflet. js, чтобы очистить все маркерные узлы. Это исправило медленность монтирования и размонтирования.

...