react-native - per - hashtag travel 2018



Come aggiungere/eliminare oggetti in ListView? (2)

Sì, chiama cloneWithRows(...)

La documentazione di React Native non copre l'oggetto ListViewDataSource , quindi può essere utile leggere i commenti nel codice sorgente per vedere come funziona.

Alcune note che possono essere utili:

  • cloneWithRows(data) è un nome un po 'fuorviante perché non crea semplicemente un clone dei dati come suggerisce il nome.
  • Invece, tenta di confrontare le nuove righe di data con le righe esistenti (se presenti) nel dataSource e rileva se ci sono nuove righe da inserire o righe esistenti che devono essere sostituite o rimosse.

  • I commenti del codice sorgente notano che i dati nell'origine dati sono immutabili per progettazione, quindi il modo corretto per modificarli è quello di specificare un'origine dati aggiornata, ovvero chiamare cloneWithRows(...) .

Può sembrare inutile passare l'intera lista solo per cambiare alcune righe, ma ci sono un paio di ragioni per le quali ha senso:

  • Innanzitutto, è compatibile con l' architettura generale basata sul flusso di React, che si concentra sull'impostazione degli stati e consente ai componenti di capire come mutarsi per riflettere il nuovo stato (pensa a come funziona this.props o this.state ). Sei libero di modificare l'array di dati come preferisci al di fuori del componente ListView , ma una volta che sei pronto per aggiornare il componente, è un approccio di flusso decente per passare l'intero stato nel componente in modo che possa aggiornarsi.

  • In secondo luogo, è decentemente efficiente. ListView esegue la differenziazione delle righe pesanti nel file Javascript prima di avviare il processo di rendering e quindi esegue il rendering di una riga alla volta (è possibile regolarla ) durante il ciclo di rendering, per ridurre i frame drop.

  • Terzo, nulla qui preclude la possibilità di supportare metodi come .addRow(..) in futuro. Il punto è che l'attuale implementazione non è un brutto inizio, perché fornisce un'interfaccia basata sullo stato che consente agli sviluppatori di non preoccuparsi di come il componente dell'elenco muta tra gli stati.

https://ffff65535.com

Possiamo creare un'origine dati per ListView come questo

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
var dataSource =  ds.cloneWithRows(['row 1', 'row 2']), };

Ma se voglio aggiungere elementi o eliminare elementi dall'origine dati, come posso farlo? Devo chiamare sempre cloneWithRows con l'array aggiornato?


Se guardi l'esempio di film espanso del tutorial React Native, implementa la ricerca che preleva nuovi film da un'API remota. Ciò significa che ogni ricerca aggiornerà il datastore, aggiungendo o rimuovendo in modo efficace gli elementi. Il posto esatto in cui ciò accade è qui:

getDataSource: function(movies: Array<any>): ListView.DataSource {
    return this.state.dataSource.cloneWithRows(movies);
}

https://github.com/facebook/react-native/blob/master/Examples/Movies/SearchScreen.js#L209

Quindi sembra che il tuo metodo sia raccomandato.