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

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制御の合成イベントハンドラーとライフサイクルメソッドでのみ機能します。setTimeoutたとえば、AJAXやイベントハンドラーでは状態の更新はバッチ処理されません。

setState（）メソッドは、コンポーネントの状態をすぐに更新するのではなく、後で処理するために更新をキューに入れるだけです。Reactは、レンダリングをより効率的にするために、複数の更新リクエストをバッチ処理する場合があります。このため、コンポーネントの以前の状態に基づいて状態を更新する場合は、特別な注意が必要です。

たとえば、次のコードは、4回呼び出された場合でも状態値属性を1だけインクリメントします。

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

更新された状態を使用するには、コールバック引数ですべてのロジックを実行します。

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

setState（updater、[callback]）メソッドは、前の状態とプロパティに基づいて状態を更新する最初の引数としてupdater関数を取り込むことができます。アップデーター関数の戻り値は、以前のコンポーネントの状態と浅くマージされます。このメソッドは状態を非同期に更新するため、状態の更新が完全に完了すると呼び出されるオプションコールバックがあります。

例：

this.setState((prevState, props) => { 
return {attribute:"value"}
})

以前の状態に基づいて状態を更新する方法の例を次に示します。

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }