setState
setState(function|object nextState[, function callback])
現在のstateとnextStateをマージします。
イベントハンドラとサーバーリクエストのコールバックから、UI更新をトリガするのに使用する際の主要なメソッドになります。
1つ目の引数にはオブジェクト(ゼロまたは1つ以上の更新するキーを含める)、 または更新するキーを含むオブジェクトを返す関数(stateとpropsの)を指定します。
下記はシンプルなオブジェクトによる使用例です。
setState({mykey: 'my new value'});
function(state, props)として関数を渡すことも可能です。
これは何らかの値が設定される前に、stateとpropsの前の値を扱う微細な更新をキューしたい幾つかのケースで有用です。
例えば、stateの値を増加したい場合は次のようにします。
setState(function(previousState, currentProps) {
return {myInteger: previousState.myInteger + 1};
});
2つ目(任意)の引数はコールバック関数で、setStateが完了し、コンポーネントが再描画されると実行されます。
注意:
決して、setState()呼び出し後に変更されたとして、直接this.stateを変更しないでください。
this.stateは不変(immutable)であるかのように扱って下さい。
setState()は即座にthis.stateを変更しませんが、stateの遷移をペンディング(保留)にします。
このメソッド呼び出しの後にthis.stateにアクセスすると、既存の値が返る可能性があります。
setStateの呼び出し操作と一括処理の呼び出しは、パフォーマンスを向上させる都合上、同期される保証はありません。
setState()はshouldComponentUpdate()で条件付きの描画ロジックが実装されていない限り、常に再描画をトリガします。
もし、変更可能(mutable)オブジェクトが使用されており、shouldComponentUpdate()内にそのロジックが実装されていなければ、
setState()の呼び出しは前のstateと新しいstateが異なる場合にのみ不要な再描画を避けます。