目前为止，每一个组件渲染数据的时候使用props,props作为组件内部属性是不可以改变的，因为props是从父组件传递过来，并被父组件所拥有。而子组件实际上是依赖父组件的环境中得到这个props。
下面介绍可以改变的属性state，用来实现组件的交互，这个属性对组件自身来说是私有的，可以通过this.setState()来改变，一旦这个属性改变后，组件会自动重新渲染。
state理解为传递数据的内部属性，用来向render传递数据。
当从服务器上抓取数据后，我们会改变接口中的数据。在此可以先定义一个data的数组作为state的初始化参数。
// tutorial12.js
var CommentBox = React.createClass({
getInitialState: function() { return {data: []}; }, render: function() {
return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm /> </div> );
}
});
初始化状态的时候拿到数据，并作为state的属性，在render的时候调用state的该属性
// tutorial13.js
var CommentBox = React.createClass(
{ getInitialState: function() { return {data: []}; }, componentDidMount: function() { $.ajax({ url: this.props.url, dataType: ‘json‘, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, render: function() {
return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data} /> <CommentForm /> </div> ); }
});
当组件第一次被创建的时候，我们希望从服务器GET一些json数据，然后更新state。这样数据渲染就会被立刻更新了。
接下来我们先顶一个一个静态的json文件放在服务器上,内容如下：
tutorial13.json
[ {"author": "Pete Hunt", "text": "This is one comment"}, {"author": "Jordan Walke", "text": "This is *another* comment"}]
然后我们用熟悉的jquery 获取这些数据
// tutorial13.jsvar CommentBox = React.createClass({ getInitialState: function() { return {data: []}; }, componentDidMount: function() { $.ajax({ url: this.props.url, dataType: ‘json‘, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) });}, render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div> );
}});
在这里componentDidMount方法会在react渲染的时候自动调用然后更新state里的data，一旦state改变，react渲染也开始改变，旧的数据就被更新了。这里可以考虑使用websocket,不需要自己写渲染dom的部分，数据更新后自动就渲染了。这个倒是挺方便。
// tutorial14.js
var CommentBox = React.createClass({ loadCommentsFromServer: function() { $.ajax(
{
url: this.props.url,
dataType: ‘json‘,
success: function(data) {
this.setState({data: data}); }.bind(this),
error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); },
getInitialState: function() { return {data: []}; },
componentDidMount: function() { this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); },
getInitialState: function() { return {data: []}; }, componentDidMount: function() {
this.loadCommentsFromServer(); setInterval(this.loadCommentsFromServer, this.props.pollInterval); },
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} /> <CommentForm />
</div> ); }
});
React.render( <CommentBox url="comments.json" pollInterval={2000} />, document.getElementById(‘content‘));
每隔两分钟访问后台获取数据，这个可以作为数据展示的实现。
可以考虑后台定时更新数据后写入记录文件，界面访问记录文件即可，无需在为之创建后台调用数据库之类的。