Kiire jõudluse võrdlus stiiliga komponentide ja tekstisisese stiili vahel reaalajas

Olen sageli mõelnud, millised olid React Native'i puhul jõudluse erinevused stiilikomponentide ja tekstisisest stiilide vahel. Võrdlen neid kahte katsejuhtumiga. Kasutan oma testis kahte erinevat stiilikomponentide versiooni, millest üks on uusim versioon ja teine ​​peaharu pärit versioon (https://github.com/styled-components/styled-components). Alates Max Stoiberist oli ta mulle teatanud, et nad on kaptenil mõned jõudluse optimeerimised teinud.

Esimene minu proovijuht sisaldab ScrollView, mis renderdab 10 000 elementi. Me kasutame nime ScrollView, mitte ListView, kuna ListView on optimeeritud suurte andmekogumite jaoks ja see ei kuva kõiki andmeid korraga.
Kuigi ScrollView renderdab kõik selle reageerivad alamkomponendid korraga.

Ma lõin 2 erinevat ekraani, milles mõlemas paiknesid ListView ja ScrollView, lastekomponentidega on loodud stiilitud komponendid ja tekstisisest stiilid.

Siin on test-screen.js, see on ekraan, millel on tekstisisesed stiilid. See sisaldab nii funktsioone renderListView kui renderScrollView (vahetage need testimisel välja, mitte teise ekraani loomise asemel)

impordi reakt, {komponent} rakendusest 'reageerima';
impordi {ListView, ScrollView, StyleSheet, View, Text} rakendusest 'react-native';
impordi testData './test-data';
const stiil = StyleSheet.create ({
  rida: {
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: hall,
  },
  kerimisvaade: {
    paind: 1,
  },
});
klass TestScreen laiendab komponenti {
  konstruktor (rekvisiidid) {
    super (rekvisiidid);
    const ds = uus ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    see.riik = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
komponentWillMount () {
    console.log (`ListView - $ {testData.length} komponentide renderdamine`);
    console.time ('inline');
  }
komponentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (rida) {
    return   {rida.nimi}  ;
  }
renderListView () {
    tagasi (
      
    );
  }
renderScrollView () {
    tagasi (
      
        {testData.map ((rida, indeks)) => (
            {rida.nimi}  
        ))}
      
    );
  }
renderdama () {
    tagasta see.renderListView ();
  }
}
eksporti vaikimisi TestScreen;

Siin on test-screen-styled.js ja see sisaldab kõiki komponente, isegi stiilsete komponentidega lähtestatud ListView ja ScrollView.

impordi reakt, {komponent} rakendusest 'reageerima';
impordi {ListView} rakendusest 'react-native';
importida stiilselt 'stiilis-komponendid / looduslikud';
impordi testData './test-data';
const Row = stiilis.Vaata`
  polsterdus: 5;
  polster-põhi: 5;
  äär-põhi-laius: 1;
  äärise põhi-värv: hall;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  flex: 1;
`;
const ListViewStyled = styled.ListView`
`;
klass TestScreenStyled laiendab komponenti {
  konstruktor (rekvisiidid) {
    super (rekvisiidid);
    const ds = uus ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    see.riik = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  komponentWillMount () {
    console.log (`ListView - $ {testData.length} komponentide renderdamine`);
    console.time ('stiilis');
  }
komponentDidMount () {
    console.timeEnd ('stiilis');
  }
renderRow (rida) {
    tagastab {row.name} ;
  }
renderListView () {
    tagasi (
      
    );
  }
renderScrollView () {
    tagasi (
      
        {testData.map ((rida, indeks)) =>   {rida.nimi}  )}
      
    );
  }
renderdama () {
    tagasta see.renderListView ();
  }
}
eksporti vaikimisi TestScreenStyled;

Tulemustulemused

Stiilikomponentide praegune versioon toimis palju paremini kui uusim väljalaskeversioon. ScrollView-testides on stiilis komponentide uusima versiooni versiooni ja kaptenite vaheline erinevus umbes 1–2 sekundit. Testisin komponentide renderdamiseks nii ListView kui ka ScrollView ainult aega, mis kulus komponendiltWillMount kuni komponentDidMount. Kui tegemist on väiksema hulga komponentide (1000 ja alla selle) renderdamisega ScrollView-s või ListView kasutamisega ükskõik millise hulga komponentide renderdamiseks, siis erinevus stiilitud komponentide ja rivisiseste stiilide vahel on tühine.

Kui renderdate loendis suures koguses komponente, soovite kasutada pigem ScrollView, vaid ListView, kuna ScrollView laadib kõik korraga. Nii et te ei kasuta kunagi ScrollView'd suure hulga komponentide renderdamiseks. Ajavahemike erinevus loendis ViewView komponentide renderdamisel stiilis-komponentide versus tekstisisese stiili vahel on kõigi renderdatud komponentide erinevate koguste korral üsna väike. Isegi kui ScrollView-s on vaja komponentide suurtes kogustes renderdamist, jõuab stiilitud komponentide uusim meistrite versioon üsna lähedale tekstisisesele stiilile.

Järeldus

Stiilikomponendid on lähenemas ja lähemale olemisele sama kiiresti kui rivisisesed stiilid. Soovitan kõigil seda oma projektis proovida. See on üsna haruldane, kui kunagi varem pakute ScrollView-s suuri komponente. Stiilitud komponentide ListView-toimivus on peaaegu sama kui tekstisiseste stiilide jõudlus isegi eriti suurte komponentide komplektide puhul. Konteksti ja loetavuse hulk, mille stiilsed komponendid pakuvad teie komponentidele ja ekraanidele, on paljudel juhtudel väikeste jõudluskulude (kui neid on) väärt väärt. Ma ei kahtle, kui stiilikomponente tulevikus värskendatakse, siis näeme, et jõudluse erinevus muutub veelgi väiksemaks.

Repo on siin: https://github.com/jm90m/rn-styled-components-performance