React.jsにおけるsetState

Question

React.jsにおいて、stateを定義するためにsetState関数を使用しますが、this.state.hoge = でも値を代入できます。
これらの本質的違いはなんでしょうか？

Answer 1

setState()でstateを書き換えた場合は、コンポーネントに対してアップデートが自動的に実行され、変更があれば再レンダリングが行われます。対して、this.state.プロパティ名 = でstateを書き換えても、手動または他の手段でアップデートが実行されない限り、再レンダリングはされず、表示が変わりません。

違いを見るためのちょっとしたサンプルを作りました。

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      a: 0,
      b: 0,
    };
  }
  aUp() {
    this.setState({
      a: this.state.a + 1
    });
  }
  bUp() {
    this.state.b = this.state.b + 1;
  }
  render() {
    return (
      <div>
        <div>
          <input type="button" onClick={this.aUp.bind(this)} value="a up" />
          <span> a = {this.state.a}</span>
        </div>
        <div>
          <input type="button" onClick={this.bUp.bind(this)} value="b up" />
          <span> b = {this.state.b}</span>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Main />,
  document.getElementById('main')
);

CodePenでの動作の様子

a upとb upを押したときの動作の違いについて確認してみてください。

なお、constructor()に関しては、コンポーネント作成時の呼び出しでconstructor()実行後にレンダリング処理が行われるため、setState()は使わずにthis.stateを直接作成することになります。

Comments

[退会済みユーザー]

>this.state.プロパティ名 = でstateを書き換えても、
>手動または他の手段でアップデートが実行されない限り、
>再レンダリングはされず、表示が変わりません。

直変更後にforceUpdate()やsetState()で手動アプデすると、ライフサイクルメソッドも更に効かなくなった記憶があります。

Answer 2

直で代入した場合だと、renderメソッドが自動的に呼ばれないのではなかったですか？