Skjótur árangur samanburður á stílbréfum í samanburði við innbyggða stíl við svörun innfæddra

Ég hef oft velt því fyrir mér hver munurinn á frammistöðu var á stílþáttum og inline stíl þegar kemur að React Native. Hérna skal ég bera saman þessa tvo með nokkrum prófatilvikum. Ég mun nota 2 mismunandi útgáfur af stílþáttum fyrir prófið mitt, önnur útgáfan er nýjasta útgáfan og hin útgáfan kemur frá aðalútibúinu (https://github.com/styled-components/styled-components). Síðan Max Stoiber, hafði tilkynnt mér að þeir hefðu gert nokkrar frammistöðu hagræðingar á meistara.

Fyrsta prófatilvikið sem ég hef er með ScrollView sem skilar 10.000 þáttum. Við notum ScrollView frekar en ListView þar sem ListView er fínstillt fyrir stór gagnasett og það skilar ekki öllum gögnum í einu.
Þó ScrollView gerir alla hluti barnsins sem bregðast við í einu.

Ég bjó til 2 mismunandi skjái sem hver hýsti ListView og ScrollView, með barnahlutum sem voru búnir til með stílhlutum og inline stílum.

Hérna er test-screen.js, þetta er skjárinn sem er með inline stíl. Það inniheldur bæði renderListView og renderScrollView aðgerðir (skipti þeim út þegar ég prófa, frekar en að búa til annan skjá)

flytja inn React, {Component} frá 'react';
flytja inn {ListView, ScrollView, StyleSheet, View, Text} frá 'react-native';
flytja inn testData frá './test-data';
const styles = StyleSheet.create ({
  röð: {
    paddingTopp: 5,
    paddingBomber: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'grátt',
  },
  skrunskoðun: {
    sveigja: 1,
  },
});
próf TestScreen nær Component {
  framkvæmdaaðili (leikmunir) {
    ofur (leikmunir);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} íhlutir`);
    console.time ('inline');
  }
componentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (röð) {
    skila   {row.name}  ;
  }
renderListView () {
    skila (
      
    );
  }
renderScrollView () {
    skila (
      
        {testData.map ((röð, vísitala) => (
            {row.name}  
        ))}
      
    );
  }
veita () {
    skila þessu.renderListView ();
  }
}
flytja út sjálfgefið TestScreen;

Hérna er prófunarskjár-styled.js og það inniheldur alla hluti jafnvel ListView og ScrollView frumstillt með stílhlutum.

flytja inn React, {Component} frá 'react';
flytja inn {ListView} frá 'react-native';
flytja inn stíl frá 'stíl-íhlutum / innfæddur';
flytja inn testData frá './test-data';
const Row = styled.View`
  padding-toppur: 5;
  padding-botn: 5;
  landamæri-botn-breidd: 1;
  landamæri-botn-litur: grár;
`;
const RowText = stíll.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  sveigja: 1;
`;
const ListViewStyled = stíll.ListView`
`;
próf TestScreenStyled nær Component {
  framkvæmdaaðili (leikmunir) {
    ofur (leikmunir);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} íhlutir`);
    console.time ('stíll');
  }
componentDidMount () {
    console.timeEnd ('stíll');
  }
renderRow (röð) {
    skila {row.name} ;
  }
renderListView () {
    skila (
      
    );
  }
renderScrollView () {
    skila (
      
        {testData.map ((röð, vísitala) =>   {row.name}  )}
      
    );
  }
veita () {
    skila þessu.renderListView ();
  }
}
flytja út sjálfgefið TestScreenStyled;

Árangursárangur

Núverandi útgáfa af íhlutum með stílfærðum hætti betur en nýjasta útgáfan. Það er um 1-2 sekúndna árangursmunur á nýjustu útgáfu stílþátta vs meistara í ScrollView prófunum. Ég prófaði aðeins þann tíma sem það tók frá componentWillMount yfir í componentDidMount, til að gera hluti í bæði ListView og ScrollView. Þegar það kemur að því að skila minna magn af íhlutum (1000 og yngri) í ScrollView eða nota ListView til að skila einhverju magni af íhlutum, þá er munurinn hverfandi milli stílhluta og inline stíla.

Þegar þú birtir mikið magn af íhlutum á lista, myndir þú vilja nota ListView frekar en ScrollView þar sem ScrollView hleður bara öllu í einu. Svo þú myndir í raun aldrei nota ScrollView til að gera mikið sett af íhlutum. Tímamismunurinn á milli flutningsþátta í ListView í sniðmátum íhlutum á móti inline stílum er nokkuð lítill fyrir öll mismunandi magn af íhlutum sem gefnir eru upp. Jafnvel þegar kemur að því að skila miklu magni af íhlutum í ScrollView, þá er nýjasta útgáfan af master fyrir stílhluta nokkuð nálægt innréttingum.

Niðurstaða

Styled-íhlutir koma nær og nær því að vera eins hratt og inline stíll. Ég mæli með öllum að prófa þetta í sínu verkefni, það er ansi sjaldgæft ef nokkru sinni að þú munt raunverulega skila miklu magni af íhlutum í ScrollView. ListView frammistaða fyrir stílhluta er næstum því sama og árangur innanlagsstíla jafnvel fyrir mjög stóra hluti. Magn samhengis og læsileika sem stíll-íhlutir veita íhlutum þínum og skjám er vel þess virði að lítill árangur kostar (ef einhver er) í mörgum tilvikum. Ég efast ekki um í huga mínum þegar framtíðaruppfærslur á stílhlutum gerast, við munum byrja að sjá árangur bilið verða enn minni.

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