Ein schneller Performance-Vergleich von Styled-Components und Inline Styles in React Native

Ich habe mich oft gefragt, welche Leistungsunterschiede zwischen gestalteten Komponenten und Inline-Stilen bestehen, wenn es um React Native geht. Hier werde ich die beiden mit mehreren Testfällen vergleichen. Ich werde für meinen Test 2 verschiedene Versionen von gestylten Komponenten verwenden, wobei eine Version die neueste Version ist und die andere Version aus der Hauptniederlassung stammt (https://github.com/styled-components/styled-components). Seit Max Stoiber hatte mir mitgeteilt, dass sie einige Performance-Optimierungen am Master vorgenommen hatten.

Der erste Testfall, den ich habe, enthält eine ScrollView, die 10.000 Elemente rendert. Wir verwenden ScrollView anstelle von ListView, da ListView für große Datenmengen optimiert ist und nicht alle Daten auf einmal gerendert werden.
Während ScrollView alle seine untergeordneten Komponenten auf einmal rendert.

Ich habe zwei verschiedene Bildschirme erstellt, die jeweils eine ListView und eine ScrollView enthielten, wobei untergeordnete Komponenten mit Stilelementen und Inline-Stilen erstellt wurden.

Hier ist test-screen.js, dies ist der Bildschirm mit Inline-Stilen. Es enthält sowohl eine RenderListView- als auch eine RenderScrollView-Funktion (die beim Testen ausgetauscht werden, anstatt einen anderen Bildschirm zu erstellen).

importiere React, {Component} von 'react';
{ListView, ScrollView, StyleSheet, View, Text} aus 'react-native' importieren;
importiere testData von './test-data';
const styles = StyleSheet.create ({
  Reihe: {
    paddingTop: 5,
    PolsterungBoden: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'grau',
  },
  scrollView: {
    flex: 1,
  },
});
Klasse TestScreen erweitert Component {
  Konstruktor (Requisiten) {
    super (Requisiten);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendern von $ {testData.length} -Komponenten`);
    console.time ('inline');
  }
componentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (row) {
    return   {row.name}  ;
  }
renderListView () {
    Rückkehr (
      
    );
  }
renderScrollView () {
    Rückkehr (
      
        {testData.map ((Zeile, Index) => (
            {row.name}  
        ))}
      
    );
  }
render () {
    return this.renderListView ();
  }
}
Standard TestScreen exportieren;

Hier ist test-screen-styled.js, und es enthält alle Komponenten, sogar ListView und ScrollView, die mit styled-components initialisiert wurden.

importiere React, {Component} von 'react';
{ListView} aus 'react-native' importieren;
Import gestylt von 'gestylten Komponenten / native';
importiere testData von './test-data';
const Row = styled.View`
  Polsterung: 5;
  gepolsterter Boden: 5;
  Rand-Bodenbreite: 1;
  Rahmen-Grundfarbe: grau;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  flex: 1;
`;
const ListViewStyled = styled.ListView`
`;
Klasse TestScreenStyled erweitert Component {
  Konstruktor (Requisiten) {
    super (Requisiten);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendern von $ {testData.length} -Komponenten`);
    console.time ('styled');
  }
componentDidMount () {
    console.timeEnd ('styled');
  }
renderRow (row) {
    return   {row.name}  ;
  }
renderListView () {
    Rückkehr (
      
    );
  }
renderScrollView () {
    Rückkehr (
      
        {testData.map ((row, index) =>   {row.name}  )}
      
    );
  }
render () {
    return this.renderListView ();
  }
}
Standard exportieren TestScreenStyled;

Leistungsergebnisse

Die aktuelle Version der gestalteten Komponenten schnitt deutlich besser ab als die neueste Release-Version. In den ScrollView-Tests besteht ein Leistungsunterschied von 1–2 Sekunden zwischen der neuesten Release-Version der gestalteten Komponenten und der Master-Version. Ich habe nur die Zeit getestet, die von componentWillMount bis componentDidMount erforderlich war, um Komponenten in ListView und ScrollView zu rendern. Wenn es darum geht, eine kleinere Anzahl von Komponenten (1000 oder weniger) in einer ScrollView zu rendern oder die ListView zum Rendern einer beliebigen Anzahl von Komponenten zu verwenden, ist der Unterschied zwischen Stilkomponenten und Inline-Stilen vernachlässigbar.

Wenn Sie eine große Anzahl von Komponenten in einer Liste rendern, möchten Sie lieber eine ListView als eine ScrollView verwenden, da ScrollView nur alles auf einmal lädt. Sie würden also niemals wirklich eine ScrollView verwenden, um eine große Menge von Komponenten zu rendern. Der Zeitunterschied zwischen dem Rendern von Komponenten in einer ListView in Stilkomponenten und Inline-Stilen ist für alle unterschiedlichen Mengen an gerenderten Komponenten relativ gering. Selbst wenn es darum geht, große Mengen von Komponenten in der ScrollView zu rendern, kommt die neueste Version von master für gestaltete Komponenten Inline-Stilen ziemlich nahe.

Fazit

Styled-Components ist immer schneller als Inline-Styles. Ich empfehle jedem, es in seinem Projekt auszuprobieren. Es ist ziemlich selten, dass Sie tatsächlich große Mengen von Komponenten in einer ScrollView rendern. Die ListView-Leistung für gestaltete Komponenten entspricht nahezu der Leistung von Inline-Stilen, auch für extrem große Komponentensätze. Der Umfang an Kontext und Lesbarkeit, den gestaltete Komponenten für Ihre Komponenten und Bildschirme bereitstellen, ist in vielen Fällen die geringen Leistungskosten (falls vorhanden) wert. Ich habe keine Zweifel, da zukünftige Updates für gestaltete Komponenten stattfinden, werden wir feststellen, dass die Leistungslücke noch kleiner wird.

Repo ist hier: https://github.com/jm90m/rn-styled-components-performance