Greitas „React Native“ stiliaus komponentų ir įterptinių stilių palyginimas

Aš dažnai susimąsčiau, kokie buvo stiliaus komponentų ir vidinių stilių našumo skirtumai, kai kalbama apie „React Native“. Aš palyginsiu juos su keliais bandomaisiais atvejais. Savo bandymui naudosiu 2 skirtingas stiliaus komponentų versijas, viena iš jų yra naujausia, o kita - pagrindinės šakos (https://github.com/styled-components/styled-components). Nuo tada, kai Maxas Stoiberis mane informavo, kad jie šiek tiek optimizavo „master“.

Pirmasis mano turimas bandymo pavyzdys yra „ScrollView“, kuris atkurs 10 000 elementų. Mes naudojame „ScrollView“, o ne „ListView“, nes „ListView“ yra optimizuotas dideliems duomenų rinkiniams ir nepateikia visų duomenų vienu metu.
„ScrollView“ pateikia visus reaguojančius komponentus iš karto.

Aš sukūriau 2 skirtingus ekranus, kuriuose kiekviename buvo „ListView“ ir „ScrollView“, o vaikų komponentai buvo sukurti naudojant sukurtus komponentus ir intarpus.

Čia yra „test-screen.js“, tai yra ekranas, kuriame yra įterptiniai stiliai. Joje yra ir „renderListView“, ir „renderScrollView“ funkcijos (jos keičiamos, kai aš testuoju, o ne sukuria kitą ekraną).

importuoti „reaguoti“, {komponentas} iš „reaguoti“;
importuoti {ListView, ScrollView, StyleSheet, View, Text} iš 'react-native';
importuoti testData iš './test-data';
const stilius = StyleSheet.create ({
  eilutė: {
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: „pilka“,
  },
  „scrollView“: {
    lankstymas: 1,
  },
});
klasės „TestScreen“ praplečia komponentą {
  konstruktorius (rekvizitai) {
    super (rekvizitai);
    const ds = naujas ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
komponentasWillMount () {
    console.log (`ListView - Pateikti $ {testData.length} komponentus ');
    console.time ('inline');
  }
komponentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (eilutė) {
    grįžti   {eilutės pavadinimas}  ;
  }
renderListView () {
    grįžti (
      
    );
  }
renderScrollView () {
    grįžti (
      <„ScrollView style = {stílus.scrollView}“
        {testData.map ((eilutė, rodyklė) = = (
          <Žiūrėti stilius = {stilius.row} klavišas = {rodyklė}>  {eilutės pavadinimas}  
        ))}
      
    );
  }
pateikti () {
    grąžinti šį.renderListView ();
  }
}
eksportuoti numatytąjį „TestScreen“;

Čia yra „test-screen-styled.js“ ir jis apima visus komponentus, net „ListView“ ir „ScrollView“, inicijuotus naudojant stiliaus komponentus.

importuokite „reaguoti“, {komponentas} iš „reaguoti“;
importuoti {ListView} iš 'react-native';
importuoti iš „stiliaus komponentai / gimtoji“;
importuoti testData iš './test-data';
const Row = stiliaus.View`
  paminkštinimas: 5;
  paminkštinimas-dugnas: 5;
  sienos-dugno plotis: 1;
  dugno spalva: pilka;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = stiliaus. ScrollView`
  fleksas: 1;
`;
const ListViewStyled = stiliaus.ListView`
`;
klasės TestScreenStyled išplečia komponentą {
  konstruktorius (rekvizitai) {
    super (rekvizitai);
    const ds = naujas ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  komponentasWillMount () {
    console.log (`ListView - Pateikti $ {testData.length} komponentus ');
    console.time ('stiliaus');
  }
komponentDidMount () {
    console.timeEnd ('stiliaus');
  }
renderRow (eilutė) {
    grąžinti {row.name} ;
  }
renderListView () {
    grįžti (
      
    );
  }
renderScrollView () {
    grįžti (
      
        {testData.map ((eilutė, rodyklė) =>   {eilutės pavadinimas}  )}
      
    );
  }
pateikti () {
    grąžinti šį.renderListView ();
  }
}
eksportuoti numatytąjį „TestScreenStyled“;

Spektaklio rezultatai

Dabartinė stiliaus komponentų versija pasirodė daug geriau nei naujausia išleidimo versija. „ScrollView“ testuose yra maždaug 1–2 sekundžių skirtumas tarp naujausios versijos, susijusios su stiliumi, ir pagrindinės versijos. Aš tik išbandžiau laiką, kuris užtruko nuo „komponentų„ WWWMM “iki„ komponentDidMount “komponentų pateikimo tiek„ ListView “, tiek ir„ ScrollView “. Kai reikia atvaizduoti mažesnį komponentų kiekį (1000 ir jaunesnius) „ScrollView“ arba naudoti „ListView“ bet kokiam komponentų kiekiui atvaizduoti, skirtumas tarp stilizuotų komponentų ir vidinių stilių yra nereikšmingas.

Pateikdami didelius komponentų kiekius sąraše, norėtumėte naudoti „ListView“, o ne „ScrollView“, nes „ScrollView“ tiesiog įkelia viską iš karto. Taigi niekada nenaudotumėte „ScrollView“ dideliam komponentų rinkiniui pateikti. Laiko skirtumas tarp „ListView“ komponentų pateikimo stilizuotuose komponentuose ir vidiniuose stiliuose yra gana mažas visų skirtingų komponentų kiekiams. Net kai reikia atvaizduoti didelius komponentų kiekius „ScrollView“, naujausia „Master“ versija, skirta stilizuotiems komponentams, yra gana artima įdėtiniams stiliams.

Išvada

Stilingi komponentai artėja ir tampa greitesni tiek, kiek linijiniai stiliai. Aš rekomenduoju visiems išbandyti savo projektą. Tai yra gana retas atvejis, kai kada nors iš tikrųjų „ScrollView“ pateiksite daug komponentų. „StyleView“, „StyleView“, našumas yra beveik toks pat, kaip ir vidinių stilių, net ir ypač didelių komponentų rinkinių. Kontekstas ir skaitomumas, kurį stilizuoti komponentai suteikia jūsų komponentams ir ekranams, daugeliu atvejų yra verti nedidelių vykdymo išlaidų (jei tokių yra). Aš net neabejoju, kad ateityje bus atnaujinti stiliaus komponentai, ir pradėsime pastebėti, kad našumo atotrūkis dar labiau sumažės.

„Repo“ yra čia: https://github.com/jm90m/rn-styled-components-performance