处理 react.js 中的主干模型/集合更改 [英] handling backbone model/collection changes in react.js

问题描述

过去几周我一直在使用 facebooks 框架 React.js 和 Backbone，但我仍然不完全确定当组件发生变化时重新渲染 React 组件的最合适方法是什么作为 prop 传入的 Backbone 集合.

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.

目前我做的是在 componentWillMount 我在集合上设置 change/add/remove 监听器并在它触发时设置状态:

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) });
};

我也看到过在渲染中直接使用 props 中的模型/集合而不是使用状态的变体，然后当集合/模型更改时调用 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>;
}

不同的方法有什么优点和缺点?有没有一种React 方式 的方法?

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:

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屋！