Question

我目前正在使用reactjs和redux将谷歌地图导入我的项目。

但每当我点击标记或只是放大时，整个地图都会被重新渲染并且地图变为灰色并使用相同的标记重新绘制相同的地图。

我尝试过使用shouldComponentUpdate，它成功停止调用render（）函数，但地图仍在重新渲染！

单击时标记的事件标记

window.google.maps.event.addListener(marker, 'click', ()=>{
  this.props.dispatch(Map.showChatroom(id, title));
});

shouldComponentUpdate：

  shouldComponentUpdate(nextProps, nextState){
    if(this.props.map.location.lat === nextProps.map.location.lat){
      return false
    }else{
      return true
    }
  }

渲染（）：

  render() {
    const {map} = this.props;
    return (
      <React.Fragment>
        {
          map.activeChatroom.id != null &&
            <Chatroom id={map.activeChatroom.id} title={map.activeChatroom.title} />
        }
        <GoogleMap map={map} getPostion={this.getPostion.bind(this)}/>
      </React.Fragment>
    );
  }

GoogleMap的：

const GoogleMap = function(props){
  return (
        <div className="map">
          <div className='map__state'>
              Zoom level: {props.map.map.zoom}<br />
              Map type: {props.map.map.maptype}<br />
              Latitude: {props.map.location.lat}<br />
              Longtitude: {props.map.location.lng}<br />
              Place: {props.map.location.place_formatted}<br />
              Place ID: {props.map.location.place_id}<br />
              Location: {props.map.location.place_location}<br />
              <button className="map__state__positioningBtn" onClick={props.getPostion}>Positioning</button>
          </div>
          <input className='pac_input' type='text' placeholder='Enter a location' />
          <div className='map__container' />;

        </div>
        );
}

map__container类是在

上呈现谷歌地图的地方

演示：https://hello-neighbor.github.io/Hello-Neighbor-Chat/

源代码：https://github.com/Hello-Neighbor/Hello-Neighbor-Chat

我真的很感激任何答案或建议

Answer 1

基于文档shouldComponentUpdate不会阻止重新呈现子组件（https://reactjs.org/docs/react-component.html#shouldcomponentupdate）。

返回false并不会阻止子组件在状态发生变化时重新呈现。

目前，如果shouldComponentUpdate（）返回false，则不会调用componentWillUpdate（），render（）和componentDidUpdate（）。请注意，将来React可能会将shouldComponentUpdate（）视为提示而不是严格的指令，并且返回false仍可能导致重新呈现组件。

请在此处查看如何更好地整理Google地图的代码：https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/。

希望它会有所帮助。

即使未调用render（），Google地图也会继续重新渲染

1 个答案: