React入门(三) 评论模块续-从服务器获取数据

评论模块续

从服务器获取数据

至今为止，我们使用的数据是我们自己创建的data数组，并且在页面渲染之前我们就已经获取到了这个数组，相当于静态的吧，但是实际开发的时候，我们希望数据从服务器获取，并且获取数据以后重新渲染我们的页面。顺便说一下，越来越喜欢了Markdown编辑器，哈哈。
在这里暂停下，因为需要一个简单地服务器，先去配置一下。。
我在服务器主目录下面创建了一个json文件：comments.json，将会从这个文件中获取评论~

React 渲染 ： state

到目前为止，每个组件都根据自己的props渲染了一次，props是从父组件传过来的属性，是不可变的，我们使用的render方法也只会调用一次。但是我们想让组件获取数据后重新渲染，就用到了可变的state，state是组件私有的，我们可以通过this.setState()更新它，组件就会被重新渲染~
render()方法依赖于props 和 state
componentDidMount () 是一个组件被渲染时被React自动调用的方法.
开始代码：
首先我们更改reactDOM.render方法：

ReactDOM.render(
    <CommentBox data = {data} url = "reactDemo1/comments.json"/>,
    document.getElementById('example')
);

我们将url reactDemo1/comments.json传给了CommentBox，然后在CommentBox中，我们做以下更改：

var CommentBox = React.createClass({
    getInitialState: function () {
        return {data:[]};
    },
    componentDidMount: function () {
        console.log("Box的componentDidMount调用");
        $.ajax({
            url:this.props.url,
            dataType:'json',
            cache:false,
            success: function (data) {
                var data1 = data.data;
                console.log(data1);
                this.setState({data:data1});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url,status,err.toString());
            }.bind(this)
        });
    },
    render: function () {
        console.log("Box的render调用");
        return (
            <div className="commentBox">
            <h1>Comments</h1>
                <CommentList data = {this.state.data}/>
                <CommentForm/>
            </div>
        );
    }
});

我们使用了juqery的ajax请求框架，调用顺序如下：
1.首次会调用一下render()方法；
2.调用componentDidMount时，我们请求数据，成功后，调用setState，将自身的state赋值；
3.setState方法触发render方法，将请求回的数据渲染在页面上。
我们想动态的定时轮询请求数据，从而实时更新评论，可以使用setInterval(func,time).第一个参数为方法名，第二个为相隔时间。
将ajax请求放到一个单独的方法中：

loadComments: function () {
        $.ajax({
            url:this.props.url,
            dataType:'json',
            cache:false,
            success: function (data) {
                var data1 = data.data;
                console.log(data1);
                this.setState({data:data1});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url,status,err.toString());
            }.bind(this)
        });
    },

在commentsBox的componentDidMount方法中，首先调用一次loadComments()方法，然后设置定时器：

componentDidMount: function () {
        this.loadComments();
        setInterval(this.loadComments,2000);
    }

在页面上我们可以看到已经在动态刷新评论了~，假如我更改一下comment.json里面的数据，页面都会刷新。
我们看一下现在的代码：

var CommentBox = React.createClass({
    getInitialState: function () {
        return {data:[]};
    },
    loadComments: function () {
        $.ajax({
            url:this.props.url,
            dataType:'json',
            cache:false,
            success: function (data) {
                var data1 = data.data;
                this.setState({data:data1});
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url,status,err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function () {
        this.loadComments();
        setInterval(this.loadComments,2000);
    },
    render: function () {
        return (
            <div className="commentBox">
            <h1>Comments</h1>
                <CommentList data = {this.state.data}/>
                <CommentForm/>
            </div>
        );
    }
});


var CommentList = React.createClass({
    render: function () {
        var commentNodes = this.props.data.map(function (comment) {
            return (
                <Comment author = {comment.author}>{comment.text}</Comment>
            );
        });
        return(
            <div className = "commentList">
                {commentNodes}
            </div>
        )
        ;
    }
});

var CommentForm = React.createClass({
    render: function () {
        return (
            <div className="commentForm">
                Hello,world,I am a Comment Form.
            </div>
        );
    }
});

var Comment = React.createClass({
    rawMarkup: function () {
        var rawMarkup = marked(this.props.children.toString(),{sanitize:true});
        return {__html:rawMarkup};
    },
    render: function () {
        return (
            <div className="comment">
                <h2 className = "commentAuthor">
                {this.props.author}
                </h2>

                <span dangerouslySetInnerHTML={this.rawMarkup()}/>
            </div>
        );
    }
});

ReactDOM.render(
    <CommentBox url = "reactDemo1/comments.json"/>,
    document.getElementById('example')
);

至此评论展示就到这里了，表单放到下一章