前端-【学习心得】-react3 响应状态

标签：

目前为止，每一个组件渲染数据的时候使用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‘));

     每隔两分钟访问后台获取数据，这个可以作为数据展示的实现。

     可以考虑后台定时更新数据后写入记录文件，界面访问记录文件即可，无需在为之创建后台调用数据库之类的。

前端-【学习心得】-react3 响应状态

标签：

原文地址：http://www.cnblogs.com/wq123/p/4396436.html