React父子组件，如何定义

最近，做一个项目xx检测，用到了谷歌地图，差不多的业务数据是在地图上展示，操作筛选的，但是错误的将谷歌地图封装到了一个子组件中，这样导致了一个问题：每当我在地图上划线筛选场强点、热力图的时候，地图组件总在不停的updataComponet()，导致地图图片数据闪动。

页面布局：

整个页面的泳道图：

附上关键代码：

ParentComponent:

queryPoint(){
   ...
   // 查找pointDatas信息,并放到父组件的props
   this.setState({
	  key: "image",
   });
}
render(){
    ...
    <GoogleMap
		url={mapUrl}
		center={mapCenter}
		zoom={this.state.key === "history" ? imageArray.zoom : this.zoom}
		levelColor={levelColor}
		pointDatas={pointDatas}
		tscId={tscId}
		setupBoundsAndZoom={this.setupBoundsAndZoom}
		tileList={tiles}
		onClick={this.state.key === "image" ? this.queryPoint : 
		onDrawend={this.onDrawend}
		keyName={this.state.key}
    />
  ...
}

解决这种问题，将googleMap定义父组件，使用子组件调用回调方法，局部更新父组件数据。