React对state的初级理解

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

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

<div id="content"></div>
<script type="text/babel">
var CommentForm = React.createClass({
handleChange : function(event){
this.setState({value: event.target.value});
},
getInitialState: function() {
return {value: ''};
},
render : function(){
return (
<form>
<input type="text" onChange={this.handleChange}/>
<ShowChange value={this.state.value}/>
</form>);
}
});
var ShowChange = React.createClass({
render : function(){
var change = this.props.value;
return (<input type="text" value={change} />);
}
});
ReactDOM.render(
<CommentForm/>,
document.getElementById('content')
);
</script>

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

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

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

<div id="content"></div>
<script type="text/babel">
var ShowChange = React.createClass({
getInitialState : function(){
return {date : ''};
},
render : function(){
var inside = this;
setInterval(function(){
inside.setState({date : new Date().toLocaleTimeString()});
}, 500)
return (<p>{this.state.date}</p>);
}
});
ReactDOM.render(
<ShowChange/>,
document.getElementById('content')
);
</script>

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