javascript - significado - react js examples

manejo de los cambios de modelo/colección de backbone en react.js

Question

He estado trabajando con el framework facebook React.js junto con Backbone durante las últimas semanas y todavía no estoy del todo seguro de cuál es la forma más adecuada de volver a procesar un componente React cuando hay cambios en una colección Backbone que ha sido aprobado como un apoyo.

actualmente, lo que hago es en componenentWillMount . Configuro change/add/remove oyentes en la colección y establecer el estado cuando se desencadena:

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

He visto ejemplos donde los modelos se clonan en el estado:

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

También he visto variantes donde el modelo / colección en utilería se usa directamente en el renderizado en lugar de usar state, y luego se invoca forceUpdate cuando las colecciones / modelos cambian, lo que hace que el componente se vuelva a renderizar

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

¿Qué beneficios y desventajas hay para los diferentes enfoques? ¿Hay alguna manera de hacerlo que sea la forma de Reaccionar ?

Answer 1

En lugar de vincular manualmente oyentes de eventos, puede usar un mixin basado en este BackboneMixin para ayudar a vincular y desvincular automáticamente a los oyentes:

https://github.com/facebook/react/blob/1be9a9e/examples/todomvc-backbone/js/app.js#L148-L171

Entonces simplemente escribes

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

y el componente será reintegrado cuando algo cambie en la colección. Solo necesita poner BackboneMixin en el componente de nivel superior: cualquier descendiente se reintentará automáticamente al mismo tiempo.

Answer 2

Hay otro BackboneMixin, cortesía de Eldar Djafarov , que vuelve a renderizar su componente cuando el modelo cambia y también proporciona una forma muy conveniente de obtener un enlace de datos bidireccional:

  var BackboneMixin = {
    /* Forces an update when the underlying Backbone model instance has
     * changed. Users will have to implement getBackboneModels().
     * Also requires that React is loaded with addons.
     */
    __syncedModels: [],
    componentDidMount: function() {
      // Whenever there may be a change in the Backbone data, trigger a reconcile.
      this.getBackboneModels().forEach(this.injectModel, this);
    },
    componentWillUnmount: function() {
      // Ensure that we clean up any dangling references when the component is
      // destroyed.
      this.__syncedModels.forEach(function(model) {
        model.off(null, model.__updater, this);
      }, this);
    },
    injectModel: function(model){
      if(!~this.__syncedModels.indexOf(model)){
        var updater = this.forceUpdate.bind(this, null);
        model.__updater = updater;
        model.on(''add change remove'', updater, this);
      }
    },
    bindTo: function(model, key){
      /* Allows for two-way databinding for Backbone models.
       * Use by passing it as a ''valueLink'' property, e.g.:
       *   valueLink={this.bindTo(model, attribute)} */
      return {
        value: model.get(key),
        requestChange: function(value){
            model.set(key, value);
        }.bind(this)
      };
    }
  }

Aquí está su jsFiddle que demuestra el uso: http://jsfiddle.net/djkojb/qZf48/13/

Answer 3

He estado jugando con BackboneMixin mencionado aquí y un par de otros recursos de reacción (de la información limitada que existe actualmente). Descubrí que cuando estaba escuchando una colección que se estaba actualizando desde el servidor, al igual que muchos eventos de n ''add'' se activarán en la colección y escuchados por BackboneMixin, por lo que se llama a force update n número de veces, que llama a render y a lo que se llama desde render varias veces.

En su lugar, utilicé el método de aceleración de subrayado / lo-dash para limitar el número de veces que se llamaría a ForceUpdate. Por lo menos, esto ha limitado el método de renderización de ser llamado tanto. Sé que reaccionar no está haciendo ninguna manipulación DOM allí, y es solo un DOM virtual, pero aún no hay razón por la que deba llamarse 100 veces para 100 adiciones inmediatas a una Colección.

Así que mi solución se parece a gist.github.com/ssorallen/7883081 pero con el método componentDidMount como este en su lugar:

componentDidMount: function() {
  //forceUpdate will be called at most once every second
  this._boundForceUpdate = _.throttle(this.forceUpdate.bind(this, null), 1000);
  this.getBackboneObject().on("all", this._boundForceUpdate, this);
}

Answer 4

IMO, React sigue siendo muy nuevo y existen muy pocas reglas establecidas sobre cómo trabajar con datos y modelos reactivos como Backbone. Esto también es una ventaja, si tiene una aplicación existente, reaccionar puede integrarse en algunas partes más pequeñas sin redefinir todo el flujo de datos.

Creo que dado que React puede hacer que el procesamiento sea "inteligente" en cualquier momento, es decir, que solo está reproduciendo partes que han cambiado, no es necesario que pase los datos como estados. Simplemente pase los datos, agregue oyentes en el componente superior y llame a forceUpdate cuando el modelo haya cambiado y se propagará muy bien.

Simplemente parece más "correcto" pasar modelos troncales como accesorios, no estados.

Una cosa importante que aprendí de la manera más difícil es utilizar el model.cid como clave (y no Math.random() ) al representar listas de modelo de red troncal:

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

Porque de lo contrario, Reaccionar no podrá reconocer qué modelo rehacer porque todos tendrán claves nuevas en cada procesamiento.

Answer 5

react.backbone parece ser la solución más reciente para la integración de React-Backbone. Sin embargo, aún no lo he probado.