Hitra primerjava zmogljivosti Styled-Components in Inline Styles v React Native

Pogosto sem se spraševal, kakšne so bile razlike med zmogljivostmi med stiliranimi komponentami in inline stili, ko gre za React Native. Tukaj bom primerjal oba z več testnimi primeri. Za svoj test bom uporabljal 2 različici različic styled-komponent, ena različica je zadnja izdaja, druga različica pa iz glavne veje (https://github.com/styled-components/styled-components). Odkar me je Max Stoiber sporočil, da so naredili nekaj optimizacij uspešnosti master.

Prvi testni primer imam ScrollView, ki bo upodobil 10.000 elementov. Uporabljamo ScrollView in ne ListView, saj je ListView optimiziran za velike nabore podatkov in ne pokaže vseh podatkov hkrati.
Medtem ko ScrollView naenkrat predstavi vse svoje reaktivne podrejene komponente.

Ustvaril sem dva različna zaslona, ​​na katerih so bili nameščeni ListView in ScrollView, z nadrejenimi komponentami, ustvarjenimi s pomočjo slogovnih komponent in inline stilov.

Tu je test-screen.js, to je zaslon z vgrajenimi slogi. Vsebuje obe funkciji renderListView in renderScrollView (zamenjate ju, ko testiram, namesto da bi ustvarili drug zaslon)

import React, {Component} iz 'react';
import {ListView, ScrollView, StyleSheet, View, Text} iz 'react-native';
uvoz testData iz './test-data';
const stili = StyleSheet.create ({
  vrstica: {
    oblazinjenjeTop: 5,
    oblazinjenjeBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'siva',
  },
  scrollView: {
    flex: 1,
  },
});
razred TestScreen podaljša komponento {
  konstruktor (rekviziti) {
    super (rekviziti);
    const ds = nov ListView.DataSource ({vrsticaHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      podatkovni vir: ds.cloneWithRows (testData),
    };
  }
komponentaWillMount () {
    console.log (`ListView - upodabljanje $ {testData.length} komponent`);
    console.time ('inline');
  }
komponentaDidMount () {
    console.timeEnd ('inline');
  }
renderRow (vrstica) {
    vrne   {vrstica.ime}  ;
  }
renderListView () {
    vrnitev (
      
    );
  }
renderScrollView () {
    vrnitev (
      
        {testData.map ((vrstica, indeks) => (
            {vrstica.ime}  
        ))}
      
    );
  }
render () {
    vrni to.renderListView ();
  }
}
izvoziti privzeti TestScreen;

Tu je test-screen-styled.js, ki vključuje vse komponente, tudi ListView in ScrollView, inicializirane s sestavljenimi komponentami.

import React, {Component} iz 'react';
import {ListView} iz 'react-native';
uvoz stiliziranih iz 'styled-components / native';
uvoz testData iz './test-data';
const vrstica = styled.View`
  oblazinjeni vrh: 5;
  oblazinjenje: 5;
  meja-širina dna: 1;
  barva obrobe od spodaj: siva;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  upogib: 1;
`;
const ListViewStyled = styled.ListView`
`;
razred TestScreenStyled razširja komponento {
  konstruktor (rekviziti) {
    super (rekviziti);
    const ds = nov ListView.DataSource ({vrsticaHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      podatkovni vir: ds.cloneWithRows (testData),
    };
  }
  komponentaWillMount () {
    console.log (`ListView - upodabljanje $ {testData.length} komponent`);
    console.time ('oblikovan');
  }
komponentaDidMount () {
    console.timeEnd ('oblikovan');
  }
renderRow (vrstica) {
    return {row.name} ;
  }
renderListView () {
    vrnitev (
      
    );
  }
renderScrollView () {
    vrnitev (
      
        {testData.map ((vrstica, indeks) =>   {vrstica.ime}  )}
      
    );
  }
render () {
    vrni to.renderListView ();
  }
}
izvoziti privzeti TestScreenStyled;

Rezultati uspešnosti

Trenutna različica stiliziranih komponent je bila bolje opravljena kot zadnja različica. Pri testih ScrollView obstaja približno 1–2-sekundna razlika v zmogljivosti v različici s stilskimi komponentami in zadnji različici. Preizkusil sem le čas, potreben od komponenteWillMount do komponenteDidMount, za upodabljanje komponent tako v ListView kot v ScrollView. Kadar gre za upodabljanje manjše količine komponent (1000 in manj) v ScrollView ali uporabo ListView za upodabljanje poljubne količine komponent, potem je razlika med stiliziranimi komponentami in vmesnimi slogi zanemarljiva.

Ko na seznam oddajate velike količine komponent, bi radi uporabili ListView in ne ScrollView, saj ScrollView naloži vse naenkrat. Tako nikoli ne bi zares uporabili ScrollView za upodabljanje velikega nabora komponent. Časovna razlika med komponentami upodabljanja v ListView v stiliziranih komponentah v primerjavi z inline stili je pri vseh različnih količinah sestavljenih komponent dokaj majhna. Tudi ko gre za upodabljanje velikih količin komponent v ScrollView, je najnovejša različica master za stilizirane komponente dokaj blizu slogovnim slogom.

Zaključek

Elementi, ki so v stilu, se bližajo in so hitrejši kot inline stili. Vsem priporočam, naj poskusijo v svojem projektu, vendar je precej redko, če sploh kdaj ustvarite velike količine komponent v ScrollView. Učinkovitost ListView za stilirane komponente je skoraj enaka zmogljivosti inline slogov, tudi za izjemno velike nabore komponent. Količina konteksta in berljivosti, ki jo stilske komponente zagotavljajo vašim komponentam in zaslonom, je v mnogih primerih vredna majhnih stroškov delovanja (če obstajajo). Brez dvoma razmišljam, da se bodo prihodnje posodobitve stiliziranih komponent začele še zmanjševati.

Repo je tu: https://github.com/jm90m/rn-styled-components-performance