Why is Leaflet so slow at pan and zoom inside React?

问题

I have a fairly simple application that renders around 3000 points using leaflet.js. It renders fairly quickly but pan and zoom are terribly slow.

Looking at the performance tools in chrome, it looks like most of the time is spend in recalculate styles, but that hasn't been helpful.

      <LeafletMap
        center={[50, 10]}
        zoom={6}
        maxZoom={10}
        preferCanvas={true}
      >
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        {this.state.locations.map( (location, index) => {
            return (
              <Marker position={[location.latitude, location.longitude]}>
                <Popup>
                  Popup for any custom information.
                </Popup>
              </Marker> 
            )
        })}
    </LeafletMap>

来源：https://stackoverflow.com/questions/61619356/why-is-leaflet-so-slow-at-pan-and-zoom-inside-react