在处理骨干react.js模型/收集变化 [英] handling backbone model/collection changes in react.js

问题描述

我一直在Facebook的框架React.js合作与骨干网在过去的几个星期，我仍然不能完全确定什么是最合适的方式重新呈现组件做出反应时，有一个变化骨干收集已经传过来的道具。

I've been working with facebooks framework React.js together with Backbone for the last couple of weeks and I'm still not entirely sure what is the most appropriate way to re-render a React component when there are changes in a Backbone collection that has been passed in as a prop.

目前我要做的就是在componenentWillMount我设置改变/添加/删除的收集听众和设置状态时，它会触发：

currently what I do is in componenentWillMount I set up change/add/remove listeners on the collection and set state when it triggers:

componentWillMount: function(){
    var myCollection = this.props.myCollection;
    var updateState = function(){
        this.setState({myCollection: myCollection.models});
    }

    myCollections.on("add remove", updateState, this);
    updateState();
}

render: function(){
    var listItems = this.state.myCollection.map(function(item){
        return <li>{item.get("someAttr")}</li>;
    });
    return <ul>{listItems}</ul>;
}

我看到那里的车型被克隆的状态例子：

I have seen examples where the models are cloned to the state:

var updateState = function () {
    this.setState({ myCollection: _.clone(this.myCollection.models) });
};

我也看到了其中的道具模型/收集直接用于渲染，而不需要使用状态，然后forceUpdate被称为变种时集合/模式的转变，从而导致组件重新渲染

I've also seen variants where model/collection in props is used directly in render instead of using state, and then forceUpdate is called when the collections/model changes, causing the component to re-render

componentWillMount: function(){
    var myCollection = this.props.myCollection;
    myCollections.on("add remove", this.forceUpdate, this);
}

render: function(){
    var listItems = this.props.myCollection.map(function(item){
        return <li>{item.get("someAttr")}</li>;
    });
    return <ul>{listItems}</ul>;
}

什么优点和缺点是有不同的做法？
是否有这样做是一种方式的方式做出反应？

what benefits and drawbacks are there to the different approaches? Is there a way of doing it that is "The React way"?

推荐答案

代替手工绑定事件监听器，你可以使用基于此BackboneMixin一个mixin来自动帮绑定和取消绑定听众：

Instead of manually binding event listeners, you can use a mixin based on this BackboneMixin to help automatically bind and unbind the listeners:

<一个href=\"https://github.com/facebook/react/blob/1be9a9e/examples/todomvc-backbone/js/app.js#L148-L171\">https://github.com/facebook/react/blob/1be9a9e/examples/todomvc-backbone/js/app.js#L148-L171

然后，你只要写

var List = React.createClass({
    mixins: [BackboneMixin],

    getBackboneModels: function() {
        return [this.props.myCollection];
    },

    render: function(){
        var listItems = this.props.myCollection.map(function(item){
            return <li>{item.get("someAttr")}</li>;
        });
        return <ul>{listItems}</ul>;
    }
});

和组件将集合中的任何更改时重新呈现。你只需要把BackboneMixin顶级组件 - 任何后代会自动在同一时间被重新呈现

and the component will be rerendered when anything changes in the collection. You only need to put BackboneMixin on the top-level component -- any descendants will be rerendered automatically at the same time.

这篇关于在处理骨干react.js模型/收集变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！