O comparație rapidă de performanță a componentelor stilate și a stilurilor inline în reacție nativă

M-am întrebat de multe ori care sunt diferențele de performanță între componentele stilate și cele inline atunci când vine vorba de React Native. Aici, voi compara cele două cu mai multe cazuri de testare. Voi folosi 2 versiuni diferite de componente stilate pentru testul meu, o versiune fiind cea mai recentă versiune, iar cealaltă versiune provenită de la filiera principală (https://github.com/styled-components/styled-components). De la Max Stoiber, mă informaseră că au făcut unele optimizări ale performanței pe master.

Primul caz de test pe care l-am inclus include un ScrollView care va genera 10.000 de elemente. Folosim ScrollView și nu ListView, deoarece ListView este optimizat pentru seturi de date mari și nu oferă toate datele dintr-o dată.
În timp ce ScrollView redă simultan toate componentele sale de reacție pentru copii.

Am creat 2 ecrane diferite care au găzduit fiecare un ListView și un ScrollView, cu componente pentru copii create folosind componente stilate și stiluri inline.

Iată test-screen.js, acesta este ecranul care are stiluri inline. Conține atât funcții renderListView cât și renderScrollView (schimbarea acestora atunci când testez, mai degrabă decât crearea unui ecran diferit)

import React, {Component} din „reacționează”;
import {ListView, ScrollView, StyleSheet, View, Text} din „react-native”;
import testData din „./test-data”;
const styles = StyleSheet.create ({
  rând: {
    paddingTop: 5,
    căptușire Bottom: 5,
    lățime bordură: 1,
    borderBottomColor: „gri”,
  },
  scrollView: {
    flex: 1,
  },
});
Clasa TestScreen extinde componenta {
  constructor (popi) {
    super (popi);
    const ds = new ListView.DataSource ({rândHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {componentele testData.length} ');
    console.time ( 'inline');
  }
componentDidMount () {
    console.timeEnd ( 'inline');
  }
renderRow (rând) {
    returna   {row.name}  ;
  }
renderListView () {
    întoarcere (
      
    );
  }
renderScrollView () {
    întoarcere (
      
        {testData.map ((rând, index) => (
            {row.name}  
        ))}
      
    );
  }
redă () {
    return this.renderListView ();
  }
}
export implicit TestScreen;

Iată test-screen-styled.js și include toate componentele, chiar și ListView și ScrollView, inițializate cu componente în stil.

import React, {Component} din „reacționează”;
importa {ListView} din „react-native”;
import stilat din „componente-stilate / native”;
import testData din „./test-data”;
const Row = stilizat.View`
  căptușire: 5;
  căptușire-jos: 5;
  margine-lățime de jos: 1;
  culoare-margine de jos: gri;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  flex: 1;
`;
const ListViewStyled = styled.ListView`
`;
Clasa TestScreenStyled extinde Component {
  constructor (popi) {
    super (popi);
    const ds = new ListView.DataSource ({rândHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ {componentele testData.length} ');
    console.time ( 'stil');
  }
componentDidMount () {
    console.timeEnd ( 'stil');
  }
renderRow (rând) {
    returnați >rowrow.name( ;
  }
renderListView () {
    întoarcere (
      
    );
  }
renderScrollView () {
    întoarcere (
      
        {testData.map ((rând, index) =>   {row.name}  )}
      
    );
  }
redă () {
    return this.renderListView ();
  }
}
export implicit TestScreenStyled;

Rezultatele performanței

Versiunea actuală a componentelor stilate a fost mult mai bună decât cea mai recentă versiune. Există aproximativ 1–2 a doua diferență de performanță în versiunile de ultimă versiune ale componentelor stilate, versiunea master în testele ScrollView. Am testat doar timpul necesar de la componentWillMount la componentDidMount, pentru redarea componentelor atât în ​​ListView cât și în ScrollView. Când vine vorba de redarea unei cantități mai mici de componente (1000 și mai mici) într-un ScrollView sau folosind ListView pentru redarea oricărei cantități de componente, atunci diferența este neglijabilă între componentele stilate și stilurile inline.

Când redați cantități mari de componente într-o listă, doriți să utilizați un ListView și nu un ScrollView, deoarece ScrollView încarcă totul dintr-o dată. Așadar, nu ați folosi cu adevărat un ScrollView pentru a reda un set mare de componente. Diferența de timp între elementele de redare dintr-un ListView în componentele stilate față de stilurile inline, este destul de mică pentru toate cantitățile diferite de componente redate. Chiar și atunci când vine vorba de redarea unor cantități mari de componente în ScrollView, cea mai recentă versiune de master pentru componente în stil se apropie destul de mult de stilurile inline.

Concluzie

Componentele stilate se apropie din ce în ce mai aproape de a fi la fel de rapide ca stilurile inline. Recomand tuturor să încerce în proiectul lor, este destul de rar, dacă vreodată, că veți reda cantități mari de componente într-un ScrollView. Performanța ListView pentru componentele stilate este aproape aceeași cu performanța stilurilor inline chiar și pentru seturile de componente extrem de mari. Cantitatea de context și de lizibilitate pe care componentele stilate le oferă componentelor și ecranelor merită în multe cazuri costurile de performanță reduse (dacă există). Nu am nicio îndoială în mintea mea pe măsură ce viitoarele actualizări ale componentelor stilate se întâmplă, vom începe să vedem că diferența de performanță devine și mai mică.

Repo este aici: https://github.com/jm90m/rn-styled-components-performance