En snabb prestationsjämförelse av stilkomponenter jämfört med inbyggda stilar i reaktionsinternativ

Jag har ofta undrat vad prestandaskillnaderna var mellan stylade komponenter och inline-stilar när det gäller React Native. Här kommer jag att jämföra de två med flera testfall. Jag kommer att använda två olika versioner av utformade komponenter för mitt test, en version är den senaste versionen och den andra versionen kommer från huvudgrenen (https://github.com/styled-components/styled-components). Sedan Max Stoiber, hade informerat mig om att de hade gjort några prestandaoptimeringar på master.

Det första testfallet jag har inkluderar en ScrollView som kommer att ge 10 000 element. Vi använder ScrollView snarare än ListView eftersom ListView är optimerad för stora datauppsättningar, och det ger inte alla data på en gång.
Medan ScrollView återger alla sina reaktiva barnkomponenter samtidigt.

Jag skapade två olika skärmar som var och en innehöll en ListView och ScrollView, med underordnade komponenter skapade med hjälp av formade komponenter och inline-stilar.

Här är test-screen.js, det här är skärmen som har inline-stilar. Den innehåller både renderListView- och renderScrollView-funktioner (byter ut dem när jag testar, snarare än att skapa en annan skärm)

importera React, {Component} från 'react';
importera {ListView, ScrollView, StyleSheet, View, Text} från 'react-native';
importera testdata från './test-data';
const styles = StyleSheet.create ({
  rad: {
    stoppning: 5,
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'grå',
  },
  ScrollView: {
    flex: 1,
  },
});
klass TestScreen utökar komponent {
  konstruktör (rekvisita) {
    super (rekvisita);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} component`);
    console.time ( 'inline');
  }
componentDidMount () {
    console.timeEnd ( 'inline');
  }
renderRow (rad) {
    return   {row.name}  ;
  }
renderListView () {
    lämna tillbaka (
      
    );
  }
renderScrollView () {
    lämna tillbaka (
      
        {testData.map ((rad, index) => (
            {row.name}  
        ))}
      
    );
  }
render () {
    returnera detta.renderListView ();
  }
}
exportera standard TestScreen;

Här är test-screen-styled.js, och det inkluderar alla komponenter till och med ListView och ScrollView som initieras med styled-komponenter.

importera React, {Component} från 'react';
importera {ListView} från 'react-native';
import stil från 'stylade komponenter / native';
importera testdata från './test-data';
const Row = styled.View`
  polstring: 5;
  stoppning-botten: 5;
  gräns-botten-bredd: 1;
  kant-ned-färg: grå;
';
const RowText = stil.Text`
';
const ScrollViewStyled = styled.ScrollView`
  flex: 1;
';
const ListViewStyled = styled.ListView`
';
klass TestScreenStyled utökar komponent {
  konstruktör (rekvisita) {
    super (rekvisita);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} component`);
    console.time ( 'formaterad');
  }
componentDidMount () {
    console.timeEnd ( 'formaterad');
  }
renderRow (rad) {
    returnera {row.name} ;
  }
renderListView () {
    lämna tillbaka (
      
    );
  }
renderScrollView () {
    lämna tillbaka (
      
        {testData.map ((rad, index) =>   {rad.namn}  )}
      
    );
  }
render () {
    returnera detta.renderListView ();
  }
}
exportera standard TestScreenStyled;

Prestationsresultat

Den nuvarande versionen av utformade komponenter presterade mycket bättre än den senaste versionen. Det finns ungefär en 1-2 sekunders prestationsskillnad i de senaste versionerna av stilkomponenter mot master i ScrollView-testerna. Jag testade bara tiden det tog från componentWillMount till componentDidMount, för att rendera komponenter i både ListView och ScrollView. När det gäller att rendera mindre mängd komponenter (1000 och under) i en ScrollView eller använda ListView för att rendera någon mängd komponenter, är skillnaden försumbar mellan utformade komponenter och inline-stilar.

När du visar stora mängder komponenter i en lista, vill du använda en ListView snarare än en ScrollView, eftersom ScrollView bara laddar allt på en gång. Så du skulle aldrig använda ScrollView för att göra en stor uppsättning komponenter. Tidsskillnaden mellan renderingskomponenter i en ListView i stilkomponenter kontra inlineformat är ganska liten för alla olika mängder som återges. Även när det gäller att rendera stora mängder komponenter i ScrollView kommer den senaste versionen av master för stylade komponenter ganska nära inline-stilar.

Slutsats

Styling-komponenter kommer närmare och närmare att vara lika snabba som inline-stilar. Jag rekommenderar alla att prova det i sitt projekt, det är ganska sällsynt om det någonsin kommer att ge stora mängder komponenter i en ScrollView. ListView-prestanda för stilkomponenter är nästan samma som prestandan för inline-format även för extremt stora komponentuppsättningar. Mängden kontext och läsbarhet som stylade komponenter tillhandahåller dina komponenter och skärmar är väl värda de små prestandakostnaderna (om några) i många fall. Jag har ingen tvekan om att framtida uppdateringar av stilkomponenter händer, vi kommer att börja se prestandagapen bli ännu mindre.

Repo är här: https://github.com/jm90m/rn-styled-components-performance