未だに理解できていないReact.js
React.jsでアプリを作っていますが、いまだに理解が浅かった。
stateはコンポーネントに1つということを理解していなかった。
1アプリ1コンポーネント1インスタンスだとstateを使えるのですが、
1コンポーネントに複数のインスタンスがあるところ【下の図でいう緑や赤】
でstateを使うときは共有されているという点に、注意しないといけないということか。
いや、待てよ、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タイプでインスタンス作成ごとに呼んでもらうには
どうすればいいのか?????