教程reactjs：優化

Question

我想知道爲什麼在Facebook的反應JS教程（https://facebook.github.io/react/docs/tutorial.html#optimization-optimistic-updates）我們不只是添加this.loadCommentsFromServer();之後在handleCommentSubmit的ajax查詢？

感謝

我想要做什麼：

var CommentBox = React.createClass({ 
    loadCommentsFromServer: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    handleCommentSubmit: function(comment) { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     type: 'POST', 
     data: comment, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    this.loadCommentsFromServer(); 
    }, 
    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 onCommentSubmit={this.handleCommentSubmit} /> 
     </div> 
    ); 
    } 
}); 

做什麼FB：

var CommentBox = React.createClass({ 
    loadCommentsFromServer: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    handleCommentSubmit: function(comment) { 
    var comments = this.state.data; 
    // Optimistically set an id on the new comment. It will be replaced by an 
    // id generated by the server. In a production application you would likely 
    // not use Date.now() for this and would have a more robust system in place. 
    comment.id = Date.now(); 
    var newComments = comments.concat([comment]); 
    this.setState({data: newComments}); 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     type: 'POST', 
     data: comment, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     this.setState({data: comments}); 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    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 onCommentSubmit={this.handleCommentSubmit} /> 
     </div> 
    ); 
    } 
}); 

Answer 1

根據他們提供的服務器的源代碼，POSTreturns the new comments after updating。

你可以看你所指定的教程承擔這個，因爲反應似乎放回狀態如下： success: function(data) { this.setState({data: data}); }