Ahora estoy usando shouldComponentUpdate pero yo simplemente no puede hacer prevProps.myPropObj == this.state.props.myPropObj para comparar. Es un objeto y que yo tendría que hacer un profundo comparar. Hace reaccionar exponer a mí algún método para que me diga si mi prop cambiado o no? O ¿me esperan para hacer la comparación profunda de mí mismo? Yo estaba pensando en reaccionar se especializa en esta comparación para que nos diga de verdadero/falso en si mismo o no?

InformationsquelleAutor Noitidart | 2016-04-20

2 Comentarios

  1. 6

    Si los objetos son inmutables, puede utilizar reaccionar del shallowCompare. Los apoyos pueden ser inmutable si usas algo como immutablejs, o cambiar los objetos mediante la sustitución y no de la mutación de ellos, por ejemplo const prop = Object.assign({}, prop, { changedValues: 'value' });

    var shallowCompare = require('react-addons-shallow-compare');
    export class SampleComponent extends React.Component {
      shouldComponentUpdate(nextProps, nextState) {
        return shallowCompare(this, nextProps, nextState);
      }
    
      render() {
        return <div className={this.props.className}>foo</div>;
      }
    }

    Para no es6, no entorno de nodo:

    El equivalente de var shallowCompare = require('react-addons-shallow-compare'); es var shallowCompare = React.addons.shallowCompare; modo de ejemplo completo sería:

    var SampleComponent = React.createClass({
      shouldComponentUpdate: function(nextProps, nextState) {
         return React.addons.shallowCompare(this, nextProps, nextState);
      },
      render: function() {
         return React.createElement('div', {className:this.props.className}, 'foo');
      }
    });
    • Hace poco profundas significa sólo comprueba el immedidate número/cadena/boolean entradas? Si ve que un objeto hace saltar?
    • Comprueba la inmediata hijos de los apoyos, Si son objetos o matrices, simplemente compara las referencias. Es por eso que usted necesita para reemplazar y no mutar su objeto y de las matrices de los accesorios.
    • Ah perfecto! Yo sólo hago setState haciendo var newObj = JSON.parse(JSON.stringify(this.state.obj)); this.setState({obj:newObj}), no importa lo profundo de mi objeto es, ¿esto califica como inmutable?
    • Yep. Estamos creando un nuevo objeto de la vieja. Existen nuevas y mejores formas de hacerlo, pero este cumple con los requisitos.
    • Esta es una solución perfecta, muchas gracias! Puede usted por favor verifique mi no es-6 versión que he publicado a continuación, si es correcto puede usted por favor agregar que para su solución. También puede usted por favor un enlace de alternativas a la JSON.parse(JSON.stringify(...)) su escribir mucho de mi parte jaja
    • Esta QA contiene varios ES6 y ES7 métodos. Usted puede utilizar immutablejs o perfecta, inmutable, o lodash para el Objeto.copia / asignación.

  2. 2

    Reaccionar no proporcione una profunda comparación de objetos fuera de la caja.

    Se podría construir algo para esto. E. g por agregar y mantener 1 IDENTIFICADOR único para el objeto para registrar los cambios.

    O el uso de una biblioteca como immutableJS constantemente a través de su app. La pena para el gran complejo de la aplicación con grandes objetos complejos.

    Para asegurarse de que: para la funcionalidad de tu aplicación, no es necesario shouldComponentUpdate(). Reaccionan tiene su propio motor que sólo representa las diferencias entre los estados.

    • Gracias por este conocimiento, se da me preguntas que me ayuden a entender Reaccionar mucho más. No la última frase aquí están en conflicto con las cosas que se tratan en este tema: stackoverflow.com/q/36741540/1828637 – en componentDidUpdate constantemente disparo? O es que el DOM nunca actualización realmente aunque el componentDidUpdate es el desencadenamiento de
    • componentDidUpdate() se ejecuta después de render ciclo, incluso si el render no se tradujo en DOM cambio. Si en una ronda prop = a: entonces, reaccionar, se representará el componente a DOM. Si en la siguiente ronda de la proposición es aprobada, el valor todavía: reaccionar ejecutará vuelva a representar ciclo (pero no va a cambiar DOM, porque nada ha cambiado), y SE ejecutará componentDidUpdate() después. Si ha implementado shouldComponentUpdate(): en la siguiente ronda reaccionar primero comprueba shouldComponentUpdate(), que devolverá false. A continuación, procesar ciclo se interrumpe y componentDidUpdate() NO se ejecutará.
    • Huy yo estaba fuera para un poco, volver a ver la respuesta, que mucho! Así que no estoy seguro de lo que quieres decir con la última frase de esta solución anterior. Usted mencionó que shouldComponentUpdate no debería ser necesario. ¿Significa esto que componentDidUpdate no debe ser necesaria, y sólo si hago uso componentDidUpdate, a continuación, voy a tener que usar shouldComponentUpdate o somethign verificar si realmente ha cambiado? Gracias por su paciente explicando. Soy amante de Reaccionar tratando de entenderlo.
    • Lo que quiero decir es que la salida de código, incluyendo shouldComponentUpdate() debe ser exactamente el mismo que el de salida de código sin ese método. shouldComponentUpdate() es más rápido a la salida, no de salida diferente. Para componentDidUpdate(), tal vez este post va a aclarar.
    • Ahhh rápido y no para de salida diferentes, gracias! Entiendo! Así que lo que realmente debe hacer es dentro de la componentDidUpdate que debo hacer el shallowCompare?
    • Es shallowCompare() el método adecuado? Eso depende de su objeto. Ver a @OriDori la respuesta. Es componentDidUpdate() el lugar correcto para comparar? Esa es otra cuestión. La respuesta depende de lo que usted quiere que su código para hacer con el resultado de la comparación.

Dejar respuesta

Please enter your comment!
Please enter your name here