Prestazioni di ListView nell'applicazione React Native + Redux

Question

Ho un ListView, che, ovviamente, rende l'elenco di alcuni elementi. Prima, stavo usando React Native senza Redux, quindi quando i miei dati sottostanti cambiano, stavo chiamando setState(), modificando i dati, quindi dataSource = dataSource.cloneWithRows(itemsData);, ed era abbastanza performante: ogni riga è stata rieseguita se solo i suoi dati cambiano (cioè se il mio rowHasChanged() restituito true per quella riga).

Ma, il design complessivo dell'applicazione era abbastanza ad-hoc e non molto ben mantenibile, così ho deciso di provare Redux.

Ora, la mia scena è "pura", cioè dipende esclusivamente dai puntelli passati, che vengono generati per mezzo di mapStateToProps(). Ma il problema è che ogni volta che un elemento cambia, viene ricreato l'intero elemento ListView, quindi tutti gli elementi vengono resi nuovamente (il mio rowHasChanged() non viene nemmeno chiamato). Questo è abbastanza frustrante, poiché l'unico modo per sbarazzarsi di questo comportamento è rendere la scena non pura di nuovo: aggiungere lo stato e in qualche modo aggiornarlo quando necessario.

Oppure, quali sono le altre alternative?

Answer 1

È possibile impedire il rendering non necessario effettuando il proprio controllo in shouldComponentUpdate. Inoltre, per accelerare il confronto effettuando un confronto superficiale, prova a rendere i tuoi dati immutabili con una libreria come Immutable.js.

Ecco un esempio utilizzando ListView.DataSource e di un set di dati immutabili tratto da this article:

// Use immutable.is() to achieve efficient change detection. 
const ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => !immutable.is(r1, r2) 
}) 
// Shallow convert to a JS array, leaving immutable row data. 
this.state = { 
    dataSource: ds.cloneWithRows(countries.toArray()) 
} 

In redux, quando si collega il componente, assicurarsi di utilizzare mapStateToProps() per filtrare i dati. Usando questa tecnica e passando solo gli oggetti di scena rilevanti, probabilmente non dovrai nemmeno usare shouldComponentUpdate.