Rychlé porovnání výkonu stylizovaných komponent vs vsadené styly v React Native

Často jsem přemýšlel, jaké jsou rozdíly ve výkonu mezi stylovými a inline styly, pokud jde o React Native. Zde porovnám tyto dva s několika testovacími případy. Pro svůj test budu používat 2 různé verze stylizovaných komponent, z nichž jedna je nejnovější verzí a druhá verze pochází z hlavní větve (https://github.com/styled-components/styled-components). Od Max Stoiber mě informoval, že provedli nějaké optimalizace výkonu na masteru.

První testovací případ, který mám, obsahuje ScrollView, který vykreslí 10 000 prvků. Používáme spíše ScrollView než ListView, protože ListView je optimalizován pro velké datové sady a nevykresluje všechna data najednou.
Zatímco ScrollView vykresluje všechny své podřízené komponenty najednou.

Vytvořil jsem 2 různé obrazovky, z nichž každá obsahovala ListView a ScrollView, s podřízenými komponenty vytvořenými pomocí stylů a vložených stylů.

Zde je test-screen.js, toto je obrazovka, která má vložené styly. Obsahuje jak funkce renderListView, tak renderScrollView (zaměnit je, když testuji, místo vytvoření jiné obrazovky)

importovat React, {Component} z 'reagovat';
importovat {ListView, ScrollView, StyleSheet, View, Text} z 'reakční-nativní';
importovat testData z './test-data';
const styles = StyleSheet.create ({
  řádek: {
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'šedá',
  },
  scrollView: {
    flex: 1,
  },
});
třída TestScreen rozšiřuje komponentu {
  konstruktor (rekvizity) {
    super (rekvizity);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} components`);
    console.time ('inline');
  }
componentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (řádek) {
    return   {row.name}  ;
  }
renderListView () {
    vrátit se (
      
    );
  }
renderScrollView () {
    vrátit se (
      
        {testData.map ((řádek, index) => (
            {row.name}  
        ))}
      
    );
  }
poskytnout() {
    return this.renderListView ();
  }
}
exportovat výchozí TestScreen;

Tady je test-screen-styled.js a zahrnuje všechny komponenty, které jsou i ListView a ScrollView inicializované stylovými komponenty.

importovat React, {Component} z 'reagovat';
importovat {ListView} z 'reaktivního';
importovat stylem z 'stylled-components / native';
importovat testData z './test-data';
const Row = stylled.View`
  polstrování: 5;
  čalounění: 5;
  šířka okraje dna: 1;
  barva okraje dna: šedá;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  flex: 1;
`;
const ListViewStyled = styled.ListView`
`;
třída TestScreenStyled rozšiřuje komponentu {
  konstruktor (rekvizity) {
    super (rekvizity);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} components`);
    console.time ('stylled');
  }
componentDidMount () {
    console.timeEnd ('stylled');
  }
renderRow (řádek) {
    return {row.name} ;
  }
renderListView () {
    vrátit se (
      
    );
  }
renderScrollView () {
    vrátit se (
      
        {testData.map ((řádek, index) =>   {row.name}  )}
      
    );
  }
poskytnout() {
    return this.renderListView ();
  }
}
exportovat výchozí TestScreenStyled;

Výsledky výkonu

Aktuální verze stylizovaných komponent fungovala mnohem lépe než nejnovější verze. V testech ScrollView existuje asi 1–2 sekundový rozdíl výkonu ve verzi s nejnovější verzí stylů a masteru. Testoval jsem pouze čas, který trvalo od komponenty componentWillMount k komponenty komponentDidMount, pro vykreslování komponent v ListView i ScrollView. Pokud se jedná o vykreslení menšího množství komponent (1 000 a méně) v ScrollView nebo použití ListView pro vykreslení jakéhokoli množství komponent, pak je rozdíl mezi stylovými komponentami a vloženými styly zanedbatelný.

Když vykreslujete velké množství komponentů v seznamu, měli byste raději použít ListView než ScrollView, protože ScrollView načítá všechno najednou. Takže byste nikdy nepoužívali ScrollView k vykreslení velké sady komponent. Časový rozdíl mezi vykreslovacími komponentami v ListView ve stylových komponentách oproti inline stylům je poměrně malý pro všechna různá množství vykreslených komponent. I když se jedná o vykreslování velkého množství komponent v ScrollView, nejnovější verze master pro stylizované komponenty se blíží inline stylům.

Závěr

Stylové komponenty se blíží a blíž k tomu, aby byly stejně rychlé jako inline styly. Doporučuji všem, aby si to vyzkoušeli ve svém projektu. Je docela vzácné, pokud vůbec, že ​​ve ScrollView skutečně vykreslíte velké množství komponent. Výkon ListView u stylizovaných komponent je téměř stejný jako u inline stylů, a to iu extrémně velkých sad komponent. Množství kontextu a čitelnosti, které stylizované komponenty poskytují vašim komponentám a obrazovkám, stojí v mnoha případech za malé náklady na výkon (pokud existují). Nepochybuji o tom, že v budoucnu dojde k aktualizaci aktualizovaných komponent, začneme vidět, jak se mezera výkonu ještě zmenší.

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