[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか？

質問

this.setStateを複数回（ここでは2回）使用した場合にどうなるかを確認したかったのです。 私はコンポーネントが2回レンダリングされると思っていましたが、どうやら1回だけレンダリングされるようです。私が持っていたもう1つの期待は、おそらくsetStateの2回目の呼び出しが最初の呼び出しの上に実行されることでしたが、あなたはそれを推測しました - うまくいきました。

へのリンクは JSfiddle

var Hello = React.createClass({
  render: function() {
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <CheckBox />
      </div>
    );
  }
});

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      alex: 0
    };
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
    this.setState({
      alex: 5
    });
  },

  render: function() {
    alert('render');
    return (
      <div>
        <label htmlFor="alex">Alex</label>
        <input type="checkbox" onChange={this.handleChange} name="alex" />
        <div>{this.state.alex}</div>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

ご覧のように、レンダリングするたびに「レンダリング」というアラートがポップアップ表示されます。

なぜ正常に動作したのか、説明はありますか？

どのように解決するのですか？

Reactは、イベントハンドラやライフサイクルメソッドで発生する状態の更新をバッチ処理します。そのため、状態を複数回更新する場合は <div onClick /> ハンドラで複数回状態を更新した場合、React は再レンダリングする前にイベント処理が終了するのを待ちます。

はっきり言って、これはReactが制御する合成イベントハンドラとライフサイクルメソッドでのみ機能します。状態の更新は、AJAXでバッチ処理されず setTimeout イベントハンドラなどでは、状態の更新はバッチ処理されません。