Не хочу повторного рендеринга, даже если состояние изменяется в реакции- google-maps - PullRequest
0 голосов
/ 27 марта 2020

Я использую приложение, которое отображает карту Google с реагирующими картами Google, на которой установлено несколько контактов, и состояние изменяется при прокрутке, а активный полет изменяется в соответствии с состоянием.

В это время центр карты Google задан как вид деятельности, но карта Google перерисовывается при изменении состояния. Я не знаю, как предотвратить рендеринг.

В Картах Google есть NPM библиотека . Он использует response- google-maps и реализован с использованием хуков. Я пытался вернуть false с помощью useEffect (), но не слышал, как есть. Пожалуйста, скажите мне

enter image description here

MapComponent (HO C)

import React from "react";
import { withGoogleMap, GoogleMap, withScriptjs, Marker, InfoWindow } from "react-google-maps";
import { compose, withProps, withHandlers, withStateHandlers } from "recompose";

const MapWithPlaces = compose(
  withProps({
    googleMapURL:
      `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_PLACE_API_KEY}&libraries=geometry,drawing,places`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: "400px", width: "100%" }} />,
    mapElement: <div style={{ height: "100%" }} />
  }),
  withStateHandlers(
    props => ({
      infoWindows: props.places.map(p => {
        return { isOpen: false };
      }),
      defaultCenter: { 'lat': props.lat, 'lng': props.lng }
    }),
    {
      onToggleOpen: ({ infoWindows }) => selectedIndex => ({
        infoWindows: infoWindows.map((iw, i) => {
          iw.isOpen = selectedIndex === i;
          return iw;
        })
      })
    }
  ),
  withHandlers(() => {
    const refs = {
      map: undefined,
    }
    console.log(refs);

    return {
      onMapMounted: () => ref => {
        refs.map = ref
      },
      onZoomChanged: ({ onZoomChange }) => (props) => {
        const center = { 'lat': parseFloat(props.lat, 10), 'lng': parseFloat(props.lng, 10) }
        refs.map.pantTo(center)
      }
    }
  }),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap defaultZoom={props.zoom} defaultCenter={props.center} key={props.key} ref={map}>
    {props.places &&
      props.places.map((place, i) => {
        let lat = parseFloat(place.lat, 10);
        let lng = parseFloat(place.lng, 10);
        return (
          <Marker
            id={place.id}
            key={place.key}
            position={{ lat: lat, lng: lng }}
            title={place.name}
            onClick={props.onToggleOpen.bind(this, i)}
            opacity={place.key === props.step ? 1 : 0.5}
            label={place.day === props.currentDay ? place.dayIndex.toString() : ''}
          >
            {props.infoWindows[i].isOpen && (
              <InfoWindow onCloseClick={props.onToggleOpen.bind(i)}>
                <div>{place.name}</div>
              </InfoWindow>
            )}
          </Marker>
        );
      })}
  </GoogleMap>
));

export default MapWithPlaces;

MapComponent (hooks)

import React, { useState, useEffect, useRef } from "react";
import { withGoogleMap, withScriptjs, GoogleMap, Marker, InfoWindow } from "react-google-maps";
// import mapStyles from "./mapStyles";

const MapCreate = React.memo((props) => {
  // const [selectedPark, setSelectedPark] = useState(null);
  const mapRef = useRef()
  useEffect(() => {
    console.log("props updates")
    console.log(props);
    const mapCenter = {
      lat: parseFloat(props.places[props.step].lat, 10),
      lng: parseFloat(props.places[props.step].lng, 10)
    }

    return false
    // refMap.current.panTo(mapCenter) //move the map to new location
  }, [props]);

  return (
    <GoogleMap defaultZoom={14} center={{ lat: props.center.lat, lng: props.center.lng }} ref={mapRef}>
      {props.places && props.places.map((place, i) => {
        let lat = parseFloat(place.lat, 10);
        let lng = parseFloat(place.lng, 10);
        return (
          <Marker
            id={place.id}
            key={place.key}
            position={{ lat: lat, lng: lng }}
            title={place.name}
            opacity={place.key === props.step ? 1 : 0.5}
            label={place.day === props.currentDay ? place.dayIndex.toString() : ''}
          >
          </Marker>
        )
      })}
    </GoogleMap>
  )
})

const MapWrapped = withScriptjs(withGoogleMap(MapCreate));

export default function Map(props) {
  const mapRef = useRef(null)
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <MapWrapped
        googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${process.env.REACT_APP_GOOGLE_PLACE_API_KEY}`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: "400px", width: "100%" }} />}
        mapElement={<div style={{ height: `100%` }} />}
        {...props}
      />
    </div>
  );
}

1 Ответ

0 голосов
/ 27 марта 2020

Try # shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState)

Используйте shouldComponentUpdate (), чтобы дать React знать, если на выход компонента не влияет текущее изменение состояния или параметров. Поведение по умолчанию заключается в повторном рендеринге при каждом изменении состояния, и в подавляющем большинстве случаев вы должны полагаться на поведение по умолчанию.

shouldComponentUpdate () вызывается перед рендерингом при получении новых реквизитов или состояний. По умолчанию true. Этот метод не вызывается для начального рендеринга или при использовании forceUpdate ()

...