javascript - instalar - react js installation

Después de actualizar los accesorios, este.props siempre es=== nextProps/prevProps

Question

Tengo un jsbin para este problema aquí: http://jsbin.com/tekuluve/1/edit

En un evento onClick, estoy eliminando un elemento del modelo y volviendo a representar la aplicación. Pero extrañamente, en componentWillReceiveProps () (y componentWillUpdate, y componentDidUpdate también), nextProps siempre es === para this.props, independientemente de lo que haga.

/** @jsx React.DOM */
var Box = React.createClass({
  render: function() {
    return (
      <div className="box" onClick={ UpdateModel }>
        { this.props.label }
      </div>
    );
  }
});

var Grid = React.createClass({
  componentWillReceiveProps: function(nextProps) {      
    // WTF is going on here???
    console.log(nextProps.boxes === this.props.boxes)        
  },
  render: function() {
    var boxes = _.map(this.props.boxes, function(d) {
      return (<Box label={ d.number } />);
    });

    return (
      <div className="grid">
        { boxes }
      </div>
    );
  }
});

var model = [
  { number: 1 },
  { number: 2 },
  { number: 3 },
  { number: 4 },
  { number: 5 }
];

function UpdateModel() {
  React.renderComponent(
    <Grid boxes={ _.pull(model, _.sample(model)) } />,
    document.body
  );
}

React.renderComponent(
  <Grid boxes={ model } />,
  document.body
);

Necesito que nextProps sea diferente a this.props después de que se haya actualizado a través de UpdateModel (), en el evento del ciclo de vida componentWillReceiveProps ().

Answer 1

Algo así me ocurrió al utilizar Flux Stores para almacenar mi estado de la manera sugerida por el tutorial oficial de la Lista de tareas ( http://facebook.github.io/flux/docs/todo-list.html ). Para cualquier persona que encuentre esto después de seguir el tutorial, parece surgir un problema en TodoStore en el método getAll (), porque devuelve una referencia directa al objeto de datos interno:

getAll: function() {
  return _todos;
}

Esto parece romper la capacidad de los métodos de ciclo de vida como componentDidUpdate (prevProps) para distinguir entre los accesorios antiguos y nuevos. Creo que la razón es que al pasar una referencia directa al objeto de datos de la Tienda en las vistas, el estado / accesorios cambian de manera efectiva inmediatamente cuando la Tienda cambia, en lugar de que los nuevos valores pasen a través de los métodos del ciclo de vida, por lo que los accesorios antiguos y nuevos siempre contienen los mismos valores. Esto podría resolverse pasando una copia del objeto de datos internos _todos en lugar del objeto en sí,

por ejemplo, cuando _todos es un objeto,

getAll: function() {
  return JSON.parse(JSON.stringify(_todos));
}

Si _todos es una matriz, se puede usar return _todos.slice () en su lugar.

En general, si utiliza una Tienda para contener información de estado y llamarla desde las vistas de su controlador, parece recomendable devolver una copia de los datos en lugar de una referencia al original, ya que el original se mutará cuando se produzcan cambios de estado.

Answer 2

Podrías usar Immutable.js. Es una biblioteca que Facebook hizo para trabajar con reaccionar / fluir. https://facebook.github.io/immutable-js/

Hemos estado perplejos por esto un par de veces.

shouldComponentUpdate(nextProps) { 
    return this.props.myObj !== nextProps.myObj
}

Muchas veces, algún valor dentro del objeto myObj cambiaría. Sin embargo, la función anterior devolvería falso. La razón es que tanto this.props.myObj como nextProps.myObj estaban nextProps.myObj referencia / apuntando al mismo objeto.

Al implementar Immutable.js, los datos siempre se transmitirán como clones (en lugar de hacer referencia al mismo objeto, en realidad serán objetos separados).

Refuerza el flujo unidireccional del flujo. Nunca podrá (accidentalmente) modificar los datos originales que se están pasando a su componente (ya sea como accesorios o desde una tienda de flujo).

Esto también le permite usar un PureRenderMixin, que detiene automáticamente el render si los valores de estado / props no han cambiado. Esto podría ayudar con el rendimiento.

Answer 3

Si no desea utilizar la difusión, puede hacer esto en su lugar. Solo cambia tu función UpdateModel a

UpdateModel(){
  React.renderComponent(
    <Grid boxes={ _.clone(_.pull(model, _.sample(model))) } />, document.body
  );
}

De lo contrario, el objeto nextProp.boxes será el mismo objeto que el objeto this.props.boxes, por lo que cualquier alteración que realice en él se reflejará en ambos.

Answer 4

Una alternativa a la implementación de Immutable.js es usar el operador de distribución de objetos.

Como ejemplo,

Supongamos que tiene una variable que desea modificar y luego hacer algo con

const obj1 = {a: 1, b: 2}
const obj2 = testObj
obj2.a: 3


// result: obj1 = obj2 = {a:3, b:2}

El objeto original será modificado. Esto se debe a que la variable obj2 es esencialmente un puntero al objeto obj1.

Ahora supongamos que usamos el operador de propagación

const obj1 = {a: 1, b: 2}
const obj2 = {...testObj}
obj2.a: 3

// result: obj1 = {a:1, b:2}, obj2 = {a:3, b:2}

El resultado de esto será que obj2 se actualiza correctamente pero obj1 permanece intacto. El operador de propagación crea efectivamente un clon superficial de obj1. He encontrado que el operador de propagación es particularmente útil para modificar el estado de los reductores de flujo. Si establece las variables en el estado directamente y las modifica, causará el problema que estaba experimentando.

Answer 5

=== comprobará si es el mismo objeto. Parece que lo que estás haciendo es mutar el valor al que apunta la propiedad de los boxes .