鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

未だに理解できていないReact.js

React.jsでアプリを作っていますが、いまだに理解が浅かった。
stateはコンポーネントに1つということを理解していなかった。

1アプリ1コンポーネントインスタンスだとstateを使えるのですが、
コンポーネント複数インスタンスがあるところ【下の図でいう緑や赤】
でstateを使うときは共有されているという点に、注意しないといけないということか。

f:id:kechiya:20151215080421p:plain

いや、待てよ、stateがコンポーネント毎の訳ないか。
Aというコンポーネントを使って、試してみよう。
getInitialStateは2回呼ばれる。stateはインスタンス毎なのです。

/** @jsx React.DOM */
var A =  React.createClass({
  getInitialState: function() {
    console.log("getInitialState called");
    var num = Math.floor( Math.random() * 100 );
    console.log(num);
    return {num: num};
  },
  render: function() {
    console.log("A render");
    return <div> {this.props.name}{this.state.num}
    </div>
    ;
  }
});
var MyForm =  React.createClass({
  getInitialState: function() {
    return {helloToA: "Hello World",helloToB: "Hello React"};
  },
  handleChangeA: function (event){
    this.setState({
      helloToA: event.target.value
    });
  },
  handleChangeB: function (event){
    this.setState({
      helloToB: event.target.value
    });
  },
  submitHandler: function (event) {
    event.preventDefault();
    alert( this.state.helloToA + this.state.helloToB);
  },
  render: function() {
    return <form onSubmit={this.submitHandler}>
      <input
        type="text"
        value={this.state.helloToA}
        onChange={this.handleChangeA} />
      <br />
      <input
        type="text"
        value={this.state.helloToB}
        onChange={this.handleChangeB} />
      <br />
      <button type="submit">送信</button>
      <A name={this.state.helloToA}></A>
      <A name={this.state.helloToB}></A>
    </form>
    ;
  }
});

React.renderComponent(<MyForm name="React-Exam" />, document.getElementById('content'));

問題は、書き方がきれいになると、ES6のReactを使ったためで、
ES6のReactだとgetInitialStateを使わずに、
コンストラクターの中でstateの初期化をすることになる。
そうすると、コンポーネントで1回しか呼ばれないから困ったことになる。
ES6タイプでインスタンス作成ごとに呼んでもらうには
どうすればいいのか?????

ここまで書いておいて・・

待てよ、Reactでは、コンストラクタインスタンス毎呼ばれる
もので。
自分の場合React-Routerを使っているから1回しか呼ばれないのではないか?
react-routerではコンポーネントは1つで、切り替わったらcomponentDidUpdateの中でデータを取得しなおす。
感じで使うのかな。なるほど。

github.com