Un rapido confronto delle prestazioni di componenti con stili e stili incorporati in React Native

Mi sono spesso chiesto quali fossero le differenze di prestazioni tra componenti di stile e stili in linea quando si trattava di React Native. Qui, confronterò i due con diversi casi di test. Userò 2 diverse versioni dei componenti di stile per il mio test, una versione è l'ultima versione e l'altra versione proveniente dal ramo principale (https://github.com/styled-components/styled-components). Da quando Max Stoiber mi aveva informato di aver fatto alcune ottimizzazioni delle prestazioni su Master.

Il primo caso di test che ho include uno ScrollView che renderizzerà 10.000 elementi. Usiamo ScrollView piuttosto che ListView poiché ListView è ottimizzato per grandi serie di dati e non esegue il rendering di tutti i dati contemporaneamente.
Mentre ScrollView esegue il rendering di tutti i suoi componenti figlio di reazione contemporaneamente.

Ho creato 2 schermate diverse che contenevano ciascuna ListView e ScrollView, con componenti figlio creati utilizzando componenti con stile e stili incorporati.

Ecco test-screen.js, questa è la schermata con stili incorporati. Contiene entrambe le funzioni renderListView e renderScrollView (sostituendole durante il test, anziché creare una schermata diversa)

import React, {Component} da 'reagire';
importare {ListView, ScrollView, StyleSheet, View, Text} da "reply-native";
import testData da './test-data';
const styles = StyleSheet.create ({
  riga: {
    imbottitura Top: 5,
    imbottitura Fondo: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'gray',
  },
  scrollView: {
    flex: 1,
  },
});
classe TestScreen estende il componente {
  costruttore (oggetti di scena) {
    super (oggetti di scena);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} componenti`);
    console.time ( 'inline');
  }
componentDidMount () {
    console.timeEnd ( 'inline');
  }
renderRow (riga) {
    return   {row.name}  ;
  }
renderListView () {
    ritorno (
      
    );
  }
renderScrollView () {
    ritorno (
      
        {testData.map ((row, index) => (
            {row.name}  
        ))}
      
    );
  }
render () {
    restituire this.renderListView ();
  }
}
esporta TestScreen predefinito;

Ecco test-screen-styled.js, e include tutti i componenti anche ListView e ScrollView inizializzati con componenti stilizzati.

import React, {Component} da 'reagire';
importare {ListView} da 'reply-native';
importazione in stile da "styleed Components / native";
import testData da './test-data';
const Row = styled.View`
  imbottitura: 5;
  imbottitura inferiore: 5;
  border-bottom-width: 1;
  bordo-fondo-colore: grigio;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  flex: 1;
`;
const ListViewStyled = styled.ListView`
`;
la classe TestScreenStyled estende il componente {
  costruttore (oggetti di scena) {
    super (oggetti di scena);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} componenti`);
    console.time ( 'stile');
  }
componentDidMount () {
    console.timeEnd ( 'stile');
  }
renderRow (riga) {
    return {row.name} ;
  }
renderListView () {
    ritorno (
      
    );
  }
renderScrollView () {
    ritorno (
      
        {testData.map ((row, index) =>   {row.name}  )}
      
    );
  }
render () {
    restituire this.renderListView ();
  }
}
esportazione predefinita TestScreenStyled;

Risultati delle prestazioni

L'attuale versione dei componenti con stile ha funzionato molto meglio dell'ultima versione di rilascio. C'è una differenza di prestazioni di 1–2 secondi nell'ultima versione di rilascio dei componenti con stile rispetto al master nei test ScrollView. Ho testato solo il tempo impiegato da componentWillMount a componentDidMount, per il rendering dei componenti in ListView e ScrollView. Quando si tratta di eseguire il rendering di una quantità minore di componenti (1000 e inferiori) in uno ScrollView o di utilizzare ListView per il rendering di qualsiasi quantità di componenti, la differenza è trascurabile tra componenti con stile e stili incorporati.

Quando si esegue il rendering di grandi quantità di componenti in un elenco, si desidera utilizzare un ListView anziché uno ScrollView, poiché ScrollView carica semplicemente tutto in una volta. Quindi non useresti mai un ScrollView per eseguire il rendering di un ampio set di componenti. La differenza di tempo tra i componenti di rendering in un ListView in componenti con stile rispetto a stili incorporati, è abbastanza piccola per tutte le diverse quantità di componenti renderizzati. Anche quando si tratta di eseguire il rendering di grandi quantità di componenti in ScrollView, l'ultima versione master per i componenti con stile si avvicina abbastanza agli stili incorporati.

Conclusione

I componenti stilizzati si avvicinano sempre di più alla velocità degli stili incorporati. Consiglio a tutti di provarlo nel loro progetto, è abbastanza raro se in realtà renderai davvero grandi quantità di componenti in uno ScrollView. Le prestazioni di ListView per i componenti con stile sono quasi le stesse delle prestazioni degli stili incorporati anche per set di componenti estremamente grandi. La quantità di contesto e leggibilità fornita dai componenti con stile ai componenti e agli schermi vale in molti casi i bassi costi di prestazione (se presenti). Non ho dubbi nella mia mente man mano che si verificano futuri aggiornamenti ai componenti con stile, inizieremo a vedere il divario delle prestazioni ridursi ancora di più.

Repo è qui: https://github.com/jm90m/rn-styled-components-performance