React对state的初级理解

props是参数，个个Class之间传值用的。

state则为某个Class的内部状态，Class需要根据这个state是否改变而做出改变；

1<div id="content"></div>
2    <script type="text/babel">
3      var CommentForm = React.createClass({
4        handleChange : function(event){
5          this.setState({value: event.target.value});
6        },
7        getInitialState: function() {
8          return {value: ''};
9        },
10        render : function(){
11          return (
12              <form>
13                <input type="text" onChange={this.handleChange}/>
14                <ShowChange value={this.state.value}/>
15              </form>);
16        }
17      });
18      var ShowChange = React.createClass({
19        render : function(){
20          var change = this.props.value;
21          return (<input type="text" value={change} />);
22        }
23      });
24      ReactDOM.render(
25        <CommentForm/>,
26        document.getElementById('content')
27      );
28    </script>

样例代码作用为：在第一个input框中输入任意内容，第二个input框值随之改变；

使用state前，需要对state赋初始值 : CommentForm.getInitialState();

如果state变了(执行过setState())，则CommentForm.render重新执行，达到刷新目的；

1<div id="content"></div>
2    <script type="text/babel">
3      var ShowChange = React.createClass({
4        getInitialState : function(){
5          return {date : ''};
6        },
7        render : function(){
8          var inside = this;
9          setInterval(function(){
10            inside.setState({date : new Date().toLocaleTimeString()});
11          }, 500)
12          return (<p>{this.state.date}</p>);
13        }
14      });
15      ReactDOM.render(
16        <ShowChange/>,
17        document.getElementById('content')
18      );
19    </script>

上边代码只是加深理解，不能这么用