ReactJS: Qual è l'uso del mondo reale degli helper Immutability in React?

Question

Il documento ufficiale di React fornisce Immutability Helpers.

Quale sarebbe l'utilizzo del mondo reale di tali aiutanti? Penso che mi manchi qualcosa di veramente semplice qui.

Answer 1

Reagire presuppone che gli oggetti impostati in stato sono immutabili, il che significa che se si desidera aggiungere o rimuovere qualche elemento all'interno dell'array si dovrebbe creare uno nuovo con elemento aggiunto mantenendo serie precedente intatta:

var a = [1, 2, 3]; 
var b = React.addons.update(a, {'$push': [4] }); 
console.log(a); // [1, 2, 3]; 
console.log(b); // [1, 2, 3, 4]; 

By utilizzando oggetti immutabili si può facilmente verificare se il contenuto di oggetto è cambiato:

React.createClass({ 
    getInitialState: function() { 
     return { elements: [1, 2, 3] }; 
    }, 
    handleClick: function() { 
     var newVal = this.state.elements.length + 1; 
     this.setState({ 
      elements: React.addons.update(this.state.elements, { '$push': [ newVal ] }) 
     }) 
    }, 
    shouldComponentUpdate: function (nextProps, nextState) { 
     return this.state.elements !== nextState.elements; 
    }, 
    render: function() { 
     return (
      <div onClick={this.handleClick}>{ this.state.elements.join(', ') }</div> 
     ); 
    } 
}); 

Answer 2

stato ReactJS dovrebbe essere preferibilmente immutabile. Significa che, ogni volta che viene chiamato render(), this.state dovrebbe essere un oggetto diverso. Cioè: oldState == newState è falso e anche oldState.someProp == newState.someProp è falso.

Quindi, per oggetti di stato semplici, non c'è dubbio che dovrebbero essere clonati. Tuttavia, se il tuo oggetto di stato è molto complesso e profondo, la clonazione dell'intero stato potrebbe influire sulle prestazioni. Per questo motivo, gli helper di immutabilità di React sono intelligenti e clona solo gli oggetti che pensa che dovrebbero clonare.

Questo è come si fa quando si clona lo stato da soli:

onTextChange: function(event) { 
    let updatedState = _.extend({}, this.state); // this will CLONE the state. I'm using underscore just for simplicity. 
    updatedState.text = event.text; 
    this.setState(updatedState); 
} 

Questo è come si fa quando si lascia di Reagire aiutanti immutabilità determinare quali oggetti si dovrebbe in realtà clonare:

onTextChange: function(event) { 
    let updatedState = React.addons.update(this.state, { text: {$set: event.text} }); 
    this.setState(updatedState); 
} 

L'esempio precedente funzionerà meglio del primo quando lo state è troppo complesso e profondo.

Answer 3

Reagire applicazione preferiscono immutabilità, ci sono due modi (da Facebook) per sostenere l'immutabilità, uno è quello di utilizzare immutable.js che è una libreria immutabilità completo, un altro è la immutable helper che è un aiuto leggero. Devi solo sceglierne uno da utilizzare in un progetto.

L'unica disadvantege di immutable.js è che si perdita per tutta l'intera applicazione compresi i Negozi e visualizzare i componenti, ad esempio,

// Stores 
props = props.updateIn(['value', 'count'], count => count + 1); 

// View Components 
render: function() { 
    return <div>{this.props.getIn("value", "count")}</div>; 
} 

Se si utilizza immutable helper, è possibile incapsulare le operazioni di immutabilità nel luogo in cui gli aggiornamenti accadere (come negozi e Redux Reducers). Pertanto, i componenti di visualizzazione possono essere più riutilizzabili.

// Stores or Reducers 
props = update(props, { 
    value: {count: {$set: 7}} 
}; 

// View Components can continue to use Plain Old JavaSript Object 
render: function() { 
    return <div>{this.props.value.count}</div>; 
}