MobX React：ビューの部分のみを再レンダリングする方法

Question

マップの反応コンポーネントがあり、マーカーを動的に追加しています。問題は、ストア内にマーカーを追加すると、マップ全体がレンダリングされるのではなく、マーカーをマップに追加します。これはどのように修正することができるかについて誰かに提案がありましたか？私は店をCPMap関数に排他的に注入する必要があると確信しています。私はちょっとわかりません。

const CPMap = withGoogleMap((props) => (
     <GoogleMap 
      ref={props.onMapLoad} 
      style={{ 
       height: 100, 
       width: 100, 
      }} 
      onCenterChanged={props.boundsChanged} 
      defaultOptions={{ styles: this.mapStyles }} 
      defaultZoom={props.zoom} 
      defaultCenter={{ lat: props.center.lat, lng: props.center.lng }}> 
      <MarkerClusterer 
       gridSize={40}> 
       { 
        props.markers.map(({ key, position }) => (
         <Marker 
          key={key} 
          position={{ lat: position.lat, lng: position.lng }} 
          icon={{ 
           url: require('../../images/marker.png') 
          }} 
         /> 
        )) 
       } 
      </MarkerClusterer> 
     </GoogleMap > 
    )) 

    return (
     <CPMap 
      style={{ 
       height: 100, 
       width: 100, 
      }} 
      onMapLoad={(gMap) => { 
       map = gMap 
       this.props.map.fetchMarkers() 
      }} 
      boundsChanged={() => { 
       this.props.map.fetchMarkers() 
      }} 
      center={this.props.map.center} 
      zoom={this.props.map.zoom} 
      markers={mobx.toJS(this.props.map.markers)} 
      containerElement={ 
       <div style={{ height: 'calc(100vh - 70px)' } 
       } /> 
      } 
      mapElement={ 
       <div style={{ height: 'calc(100vh - 70px)' }} /> 
      } /> 
    ) 
} 

Answer 1

私はあなたに次の解決策を提案します：メーカーをCMapコンポーネントに直接渡すのではなく、代わりにストアを使用してください。

コンポーネントで次に

const markersStore = observable({ 
    markers: [] 
}); 

- 独立したコンポーネントにMarkersClustererを移動し、1つのレベル深いmarkersStoreを渡す：

//import markersStore or inject via mobx-react package 
class MyComponent extends Component { 
    render() { 
     const CMap = withGoogleMap((props) => (
     <GoogleMap 
      ... 
      <Clusterer markersStore={props.markersStore} /> 
     /> 
    )) 
     return (
     <CMap 
      ... 
      markersStore={markersStore} 
     /> 
    ) 
    } 
} 

それはときmarkersStore「マーカー」プロパティの更新を更新して、新しいクラスタコンポーネントが観察してください。

@observable 
class Clusterer extends Component { 
    render(){ 
     const { markers } = this.props.markersStore; 
     return (
      <MarkerClusterer> 
       { markers.map(...)} 
      </MarkerClusterer> 
     ) 
    } 
} 

最後に、fetchMarkersメソッドを更新して、markersStoreに新しいデータを設定します。

このソリューションでは、CMapコンポーネントはマーカーについて何も知らず、新しいデータを受け取ったときに更新しません。同時に、MarkersClustererコンポーネントはより巧みになり、markersStoreの変更を「監視」します。