React - 悬停在动态生成的组件调用渲染方法

Question

我的应用程序包含一个 google 地图，该地图根据 API 的坐标显示标记。加载应用程序后，会发出 API 请求并抓取一些坐标以显示在屏幕上。 API 数据映射到 <Marker /> 组件。

问题：将鼠标悬停在任何标记上时，会再次调用渲染方法，并且标记会快速闪烁。为什么？

Map.js

state = {
    center: { lat, lng },
    zoom: defaultZoom,
    showingInfoWindow: false,
    selectedMarker: ""
  };

onMarkerHover = (e, marker) => {
    this.setState({
      selectedMarker: marker.recordid,
      showingInfoWindow: true
    });
    this.onSendMarkerInfoToParent();
  };

render() {
    const data = this.props.searchedResponse;
    console.log("rerendering"); // printed in console on every hover event
    const Markers = props =>
      data
        ? data.data.records.map(marker => {
            return (
              <Marker
                position={{ lat: marker.fields.geom.coordinates[1], lng: marker.fields.geom.coordinates[0] }}
                key={marker.recordid}
                onClick={e => this.onMarkerClick(e, marker)}
                onMouseOver={e => this.onMarkerHover(e, marker)}
              >
                {this.state.showingInfoWindow && this.state.selectedMarker === marker.recordid && (
                  <InfoWindow
                    className="info-window"
                    position={{ lat: marker.fields.geom.coordinates[1], lng: marker.fields.geom.coordinates[0] }}
                  >
                    <div>{rateTimeCalc(marker)}</div>
                  </InfoWindow>
                )}
              </Marker>
            );
          })
        : null;
    return (
      <div className="map-container">
        <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_KEY}>
          <GoogleMap id="map" center={this.state.center} zoom={this.state.zoom}>
            <Markers />
          </GoogleMap>
        </LoadScript>
      </div>
    );
  }

App.js

onSendMarkerInfoToParent = e => {
    console.log("parent", e);
  };

Answer 1

这是因为 React 应用程序的生命周期。您已在设置状态的代码中映射了 onHover 方法。

onMouseOver={e => this.onMarkerHover(e, marker)}

onMarkerHover = (e, marker) => {
    this.setState({
      selectedMarker: marker.recordid,
      showingInfoWindow: true
    });
    this.onSendMarkerInfoToParent();
  };

此 setState 导致重新渲染。

在 React 中，每当您设置组件的状态时。 render 方法将自动执行。您可以阅读这篇文章以供参考：https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df.

Answer 2

google-maps-react 和标记重新渲染的解决方案：

1.Create 所有标记的包装器 PureComonent。

2.Maintain 所有标记一个信息窗口。

工作示例：

https://codesandbox.io/s/falling-wave-kjcee

React - 悬停在动态生成的组件调用渲染方法

React - hovering over dynamically generated component calls render method

reactjs

google-maps

react-google-maps