React - 悬停在动态生成的组件调用渲染方法
React - hovering over dynamically generated component calls render method
我的应用程序包含一个 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);
};
这是因为 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.
google-maps-react 和标记重新渲染的解决方案:
1.Create 所有标记的包装器 PureComonent。
2.Maintain 所有标记一个信息窗口。
工作示例:
我的应用程序包含一个 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);
};
这是因为 React 应用程序的生命周期。 您已在设置状态的代码中映射了 onHover 方法。
onMouseOver={e => this.onMarkerHover(e, marker)}
onMarkerHover = (e, marker) => {
this.setState({
selectedMarker: marker.recordid,
showingInfoWindow: true
});
this.onSendMarkerInfoToParent();
};
此 setState 导致重新渲染。
在 React 中,每当您设置组件的状态时。 render 方法将自动执行。
google-maps-react 和标记重新渲染的解决方案:
1.Create 所有标记的包装器 PureComonent。
2.Maintain 所有标记一个信息窗口。
工作示例: