Rails 和 ReactJS - 重新渲染組件

Question

所以我仍在玩 Todo 應用程序以學習 Reactjs。 該應用程序退出簡單，用戶可以添加新任務並將其標記為已完成。

我使用 react-rails gem 在后端使用 Rails，並嘗試了不同的方法來在創建或更新新任務時處理組件重新渲染。

我不是以給定的時間間隔從服務器獲取數據，而是在每次創建或更新新任務時渲染一個包含來自后端的所有任務的 JSON。

我想知道這是否是最優化的方法。 所以這是我的 Rails 控制器：

 class TasksController < ApplicationController before_filter :get_tasks def get_tasks @tasks = Task.where('iscompleted is null').order(created_at: :desc) end def index render :json => @tasks end def create @task = Task.create(task_params) render :json => @tasks end def update @task = Task.update(params[:id], task_params) render :json => @tasks end private def task_params params.require(:task).permit(:id, :name, :iscompleted) end end

這是我的 ReactJS 組件：

 var TodoBox = React.createClass({ loadTasksFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', cache: false, success: function(data) { this.setState({data: data.tasks}); }.bind(this) }); }, handleTaskSubmit: function(task) { $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: {task}, success: function(data) { this.setState({data: data.tasks}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, handleTaskCompleted: function(task) { $.ajax({ url: '/task/' + task.id, dataType: 'json', type: 'PATCH', data: {task}, success: function(data) { this.setState({data: data.tasks}); }.bind(this), error: function(xhr, status, err) { console.error(this.props.url, status, err.toString()); }.bind(this) }); }, getInitialState: function() { return { data: [] }; }, componentDidMount: function() { this.loadTasksFromServer(); }, render: function() { return ( <div className="todoBox"> <div className="container-fluid col-md-6 col-md-offset-3"> <TodoForm onTaskSubmit={this.handleTaskSubmit}/> <TodoList onTaskCompleted={this.handleTaskCompleted} data={this.state.data}/> </div> </div> ); } });

這種方法效果很好，但我是來學習的，所以每一條評論或建議都將不勝感激。

謝謝

Answer 1

我發現在 React 中過濾結果更有效，因為它不需要從后端重新渲染所有任務。 因此，我只從 Rails 后端渲染新對象或更新的對象，如下所示：

class TasksController < ApplicationController

def index
    @tasks = Task.all
    render :json => @tasks
end

def create
    @task = Task.create(task_params)

    render :json => @task
end

def update
    @task = Task.update(params[:id], task_params)

    render :json => @task
end



private
def task_params
    params.require(:task).permit(:id, :name, :iscompleted)
end

因此 React 組件看起來像這樣：

var TodoBox = React.createClass({

loadTasksFromServer: function() {
    var rawData = [];
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: function(data) {
            this.setState({data: data.tasks});
        }.bind(this)
    });
},


handleTaskSubmit: function(task) {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: {task},
        success: function(data) {
            this.state.data.push(data.task);
            this.setState({data: this.state.data});
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });     
},
handleTaskCompleted: function(task) {
    $.ajax({
        url: '/task/' + task.id,
        dataType: 'json',
        type: 'PATCH',
        data: {task},
        success: function(data) {
            task.iscompleted = data.task.iscompleted;
            this.setState({data: this.state.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.loadTasksFromServer();
},
render: function() {
    return (
        <div className="todoBox">
        <div className="container-fluid col-md-6 col-md-offset-3">
        <TodoForm onTaskSubmit={this.handleTaskSubmit}/>
        <TodoList onTaskCompleted={this.handleTaskCompleted} data={this.state.data}/>

        </div>

        </div>
        );
}

});

然后我在顯示它們之前過濾 TodoList 組件中的結果。