Reaktiv Doğuşda İnteqrasiya edilmiş Stil vs Qəşəng komponentlər və sürətli bir performans müqayisəsi

Reaktiv Native deyildikdə, tez-tez performans fərqlərinin səpkili komponentlər və inline üslublar arasında nə olduğunu merak etdim. Burada ikisini bir neçə sınaq işi ilə müqayisə edərəm. Testim üçün səpkili komponentlərin 2 fərqli versiyasından istifadə edəcəm, bir versiya son buraxılışdır, digəri isə master filialdan gəlir (https://github.com/styled-components/styled-components). Max Stoiber-dən bəri, ustada bəzi performans optimallaşdırmaları etdiklərini bildirmişdim.

İlk test vəziyyətimdə 10.000 element göstərəcək ScrollView daxildir. ListView böyük məlumat dəstləri üçün optimallaşdırıldığından və bütün məlumatları bir anda vermədiyindən ListView-dan daha çox ScrollView istifadə edirik.
ScrollView bütün uşaq reaksiya komponentlərini bir anda təqdim edir.

Hər biri bir ListView və ScrollView yerləşdirdikləri 2 fərqli ekran yaratmışam, tərkib hissəsi və daxili üslublardan istifadə edərək yaradılan uşaq komponentləri ilə.

Budur test-screen.js, bu daxili üsluba sahib olan ekrandır. İkisi də bir renderListView və renderScrollView funksiyalarını ehtiva edir (fərqli bir ekran yaratmaq əvəzinə test edərkən dəyişdirin)

'reaksiya' dan Reaction, {Komponent} idxal edin;
'reaksiya-doğma' dan {ListView, ScrollView, StyleSheet, View, Text} idxal edin;
'./test-data' dan testData idxal edin;
const üslubları = StyleSheet.create ({
  sıra: {
    paddingTop: 5,
    paddingBottom: 5,
    sərhədBottomEni: 1,
    borderBottomColor: 'boz',
  },
  scrollView: {
    çevik: 1,
  },
});
sinif TestScreen Komponenti genişləndirir {
  konstruktor (rekvizit) {
    super (rekvizit);
    const ds = yeni ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    bu.stat = {
      məlumat mənbəyi: ds.cloneWithRows (testData),
    };
  }
komponentWillMount () {
    console.log (`ListView - $ {testData.length} komponentlərini göstərmək ');
    konsol.time ('inline');
  }
komponentDidMount () {
    konsol.timeEnd ('inline');
  }
renderRow (sıra) {
    qayıtmaq   {satır.name}  ;
  }
renderListView () {
    qayıt (
      
    );
  }
renderScrollView () {
    qayıt (
      
        {testData.map ((sıra, indeks) => (
            {satır.name}  
        ))}
      
    );
  }
göstər () {
    return.renderListView ();
  }
}
default TestScreen ixrac;

Budur test-screen-styled.js və bütün tərkib hissələrini, hətta ListView və ScrollView üslublu komponentlərlə birləşdirilmişdir.

'reaksiya' dan Reaction, {Komponent} idxal edin;
'reaksiya doğma' dan {ListView} idxal edin;
'səpkili komponentlər / doğma' dan səpkili idxal;
'./test-data' dan testData idxal edin;
const Row = səpkili.View`
  padding-top: 5;
  padding-alt: 5;
  haşiyə-alt en: 1;
  haşiyə-alt rəng: boz;
`;
const RowText = üslublu.Mətn`
`;
const ScrollViewStyled = styled.ScrollView`
  çevik: 1;
`;
const ListViewStyled = styled.ListView`
`;
sinif TestScreenStyled Komponenti genişləndirir {
  konstruktor (rekvizit) {
    super (rekvizit);
    const ds = yeni ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    bu.stat = {
      məlumat mənbəyi: ds.cloneWithRows (testData),
    };
  }
  komponentWillMount () {
    console.log (`ListView - $ {testData.length} komponentlərini göstərmək ');
    konsol.time ('səpkili');
  }
komponentDidMount () {
    konsol.timeEnd ('səpkili');
  }
renderRow (sıra) {
    qayıt  << SıraMətn >>{row.name} ;
  }
renderListView () {
    qayıt (
      
    );
  }
renderScrollView () {
    qayıt (
      
        {testData.map ((sıra, indeks) =>   {sıra.name}  )}
      
    );
  }
göstər () {
    return.renderListView ();
  }
}
defolt ixracı TestScreenStyled;

Performans nəticələri

Qəşəng komponentlərin hazırkı versiyası son buraxılış versiyasından daha yaxşı şəkildə yerinə yetirilmişdir. ScrollView testlərində səpkili komponentlərin son buraxılış versiyasına və mastera görə təxminən 1-2 saniyəlik bir fərq var. Mən yalnız ListView və ScrollView-də komponentlərin göstərilməsi üçün komponentWillMount-dan komponentDidMount-a qədər vaxt sınadım. ScrollView-də daha az miqdarda (1000 və daha aşağı) komponentlərin göstərilməsi və ya hər hansı bir miqdarda komponentlərin göstərilməsi üçün ListView-in istifadəsi məsələsinə gəldikdə, səpkili komponentlər və daxili üslublar arasında fərq cüzi olur.

Bir siyahıda çox miqdarda komponent təqdim edərkən ScrollView-dan çox ListView istifadə etmək istərdiniz, çünki ScrollView hər şeyi bir anda yükləyir. Beləliklə, heç vaxt böyük bir dəst dəsti göstərmək üçün ScrollView istifadə etməyəcəksiniz. Sistemli üslublara qarşı səpkili komponentlərdə ListView-də komponentlərin göstərilməsi arasındakı vaxt fərqi, göstərilən komponentlərin bütün müxtəlif miqdarı üçün kifayət qədər kiçikdir. ScrollView-də çoxlu miqdarda komponentlər göstərməyə gəldikdə, səpkili komponentlər üçün ustadın son versiyası daxili üslublara kifayət qədər yaxınlaşır.

Nəticə

Qəşəng komponentlər daha inline üslublar qədər sürətli olmağa yaxınlaşır və yaxınlaşır. Hər kəsə öz layihəsində sınamağı tövsiyə edirəm, əgər ScrollView-də çoxlu sayda komponent təqdim etsəniz olduqca nadirdir. Dizaynlı komponentlər üçün ListView performansı, hətta çox böyük komponent dəstləri üçün daxili üslubların performansı ilə eynidir. Qəşəng komponentlərin sizin komponentlərinizə və ekranlarınıza verdiyi kontekst və oxunuş miqdarı bir çox hallarda kiçik performans xərclərinə (əgər varsa) dəyərlidir. Dizayn komponentləri ilə bağlı gələcək yeniliklər baş verdiyindən, düşüncəmdə heç bir şübhəm yoxdur, performans boşluğunun daha da kiçildiyini görməyə başlayacağıq.

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