ReactJSで特定のキーにsetState

Question

特定の要素のみを更新するために、setStateのパラメータで特定のキーを渡すことができるチュートリアルを読んだ。しかしここに私の場合です：

私はtomchentwの反応 - google - マップコンポーネントを使用します。私はAppの状態でマップのオプションを設定します（そして、それを小道具を介してGoogleMapコンポーネントに渡します）。

app.jsx

constructor() { 
    super(); 
    //Initial value 
    this.state = { 
     optionsMap:{ 
     center: { 
      lat: 46.8261444, 
      lng: 2.2418121 
     }, 
     zoom: 5 
    }, 
     variables: {} 
    } 
} 

map.jsx

render() { 
     return (
      <GoogleMapLoader 
       containerElement={ <div {...this.props} style={{ height: '500px'}}></div> } 
       googleMapElement={ 
        <GoogleMap 
         ref="googleMap" 
         {...this.props.optionsMap} //biding map options with spread 
         onIdle={this._handleIdle.bind(this)}> 
        </GoogleMap> 
       } 
      /> 
     ); 
    } 


    _handleIdle(event) { 
     this.props.updateVarsOptions(this.props.optionsMap); 
    } 

私はapp.jsxで定義する（私はマップをmoove）（）関数の私updateVarOptionsを呼び出して、私は非常に特定のキーの変数の状態を更新してください。

app.jsx

_updateVarsOptions(mapOptions) { 
     this.setState({ 
      variables : mapOptions 
     }); 
} 

だから、私は状態にのみ変数キーを更新し、私はSETSTATEを行うときに、マップがデフォルト値を持つresettings（中心位置とズームです）。状態がoptionsMapキーをに更新しています。なぜか分からない。

Answer 1

マップがoptionsMapのデフォルト値で更新されているのは、setStateを呼び出すと、コンポーネントが再レンダリングされるからです（そうでない場合はshouldComponentUpdateで定義された動作がない限り）。これにより、Googleマップの要素が再描画され、optionsMapの情報が再度渡されます（最初のレンダリング以降は変更されていません）。

shouldComponentUpdatelifecycle functionをご覧ください。この関数はレンダリングの直前に呼び出され、その戻り値は、render関数を再度呼び出す必要があるかどうかをコンポーネントに通知します。デフォルトでは、常にtrueを返します。 variables状態が変更された場合、コンポーネントが再レンダリングされないようにこの動作を変更できます。