Reaktsiya tubjoylarida uslubli komponentlar va ichki uslublarni tezkor ravishda taqqoslash

Ko'pincha Reaktiv Native haqida gap ketganda, uslubiy komponentlar va ichki uslublar o'rtasida qanday farq borligi haqida savol tug'ilgandi. Bu erda men ikkalasini bir nechta sinov holatlari bilan solishtiraman. Men test uchun ikkita turli xil tarkibiy qismlardan foydalanaman, bitta versiya eng so'nggi versiya va boshqa versiya asosiy tarmoqdan (https://github.com/styled-components/styled-components). Maks Stoiberdan beri, ular ustada ba'zi ishlashlarni optimallashtirishganliklari haqida menga xabar berishdi.

Menda birinchi sinov holati ScrollView-ni o'z ichiga oladi, u 10000 elementni namoyish etadi. ListView-dan ko'ra ScrollView-dan foydalanamiz, chunki ListView katta ma'lumotlar to'plamlari uchun optimallashtirilgan va u barcha ma'lumotlarni birdaniga namoyish eta olmaydi.
ScrollView bolalarning barcha komponentlarini birdaniga namoyish etadi.

Men ikkita turli xil ekranlarni yaratdim, ularning har biri ListView va ScrollView-ga joylashtirildi, bunda bolalar komponentlari stil-komponentlar va ichki uslublar yordamida yaratilgan.

Mana bu screen-screen.js, bu ichki chizilgan uslubga ega ekran. Unda renderListView va renderScrollView funktsiyalari mavjud (boshqa ekran yaratgandan ko'ra, men sinovdan o'tkazganimda ularni almashtirish).

import qilish reaktsiyasi, "komponent"} 'reaktsiya' dan;
'Reaktivlik' dan {ListView, ScrollView, StyleSheet, View, Text} import qilish;
'./test-data' dan testData-ni import qilish;
const uslublari = StyleSheet.create ({
  qator: {
    paddingTop: 5,
    paddingBottom: 5,
    chegaraBottomWidth: 1,
    borderBottomColor: "kulrang",
  },
  scrollView: {
    moslashuvchan: 1,
  },
});
class TestScreen {komponentasini kengaytiradi {
  quruvchi (rekvizit) {
    super (rekvizitlar);
    const ds = yangi ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      ma'lumotlar manbasi: ds.cloneWithRows (testData),
    };
  }
komponentWillMount () {
    console.log (`ListView - $ {testData.length} komponentlarini ko'rsatish ');
    konsol.time ('inline');
  }
komponentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (qator) {
    return   {row.name}  ;
  }
renderListView () {
    qaytish (
      
    );
  }
renderScrollView () {
    qaytish (
      
        {testData.map ((qator, indeks) => (
            {qator.name}  
        ))}
      
    );
  }
render () {
    return this.renderListView ();
  }
}
standart sinov versiyasini eksport qilish;

Bu erda ekran-styled.js-ning sinov versiyasi mavjud bo'lib, u barcha tarkibiy qismlarni o'z ichiga oladi, hatto ListView va ScrollView styled-komponentlarga qo'shilgan.

import qilish reaktsiyasi, "komponent"} 'reaktsiya' dan;
"list-view" dan {ListView} ni import qilish;
'styled-komponentlar / native' dan import qilingan;
'./test-data' dan testData-ni import qilish;
const Row = styled.View`
  padding-top: 5;
  padding-tub: 5;
  chegara-pastki-kenglik: 1;
  chegara-pastki rang: kul rang;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  egiluvchanlik: 1;
`;
const ListViewStyled = styled.ListView`
`;
sinf TestScreenStyled tarkibiy qismni kengaytiradi {
  quruvchi (rekvizit) {
    super (rekvizitlar);
    const ds = yangi ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      ma'lumotlar manbasi: ds.cloneWithRows (testData),
    };
  }
  komponentWillMount () {
    console.log (`ListView - $ {testData.length} komponentlarini ko'rsatish ');
    konsol.time ('uslubiy');
  }
komponentDidMount () {
    console.timeEnd ('styled');
  }
renderRow (qator) {
    return {row.name} ;
  }
renderListView () {
    qaytish (
      
    );
  }
renderScrollView () {
    qaytish (
      
        {testData.map ((qator, ko'rsatkich) =>   {row.name}  )}
      
    );
  }
render () {
    return this.renderListView ();
  }
}
birlamchi eksport qilish TestScreenStyled;

Ishlash natijalari

Stil-tarkibiy qismlarning joriy versiyasi so'nggi versiyaga qaraganda yaxshiroq bajarildi. ScrollView sinovlarida usta-tarkibiy qismlarning so'nggi versiyasi va master-versiyalarida taxminan 1-2 soniya farq bor. Men ListView va ScrollView ikkalasida tarkibiy qismlarni ko'rsatish uchun komponentWillMount-dan komponentDidMountgacha bo'lgan vaqtni sinab ko'rdim. ScrollView-da kichikroq tarkibiy qismlarni (1000 va undan kichik) ko'rsatish yoki biron-bir qismni ko'rsatish uchun ListView-dan foydalanish haqida gap ketganda, u holda styled-komponentlar va chizilgan uslublar o'rtasidagi farq unchalik katta emas.

Ro'yxatda ko'p miqdordagi tarkibiy qismlarni namoyish qilayotganda, ScrollView-dan ko'ra ListView-dan foydalanishni xohlaysiz, chunki ScrollView hamma narsani birdaniga yuklaydi. Shunday qilib, siz hech qachon ScrollView-dan ko'p qismli komponentlarni namoyish qilish uchun foydalana olmaysiz. ListView-da tarkibiy qismlarni stil-tarkibiy qismlarga va ichki uslublarga nisbatan ko'rsatish o'rtasidagi vaqt farqi, ko'rsatilgan tarkibiy qismlarning har xil miqdori uchun unchalik katta emas. ScrollView-da ko'p miqdordagi tarkibiy qismlarni namoyish qilish haqida gap ketganda ham, master-stil uchun komponentlar uchun eng so'nggi versiyasi ichki uslublarga juda yaqin.

Xulosa

Styled-komponentlar ichki uslublar kabi tezkor bo'lishga yaqinlashmoqda. Men barchaga o'z loyihalarida sinab ko'rishni tavsiya etaman, agar ScrollView-da ko'p miqdordagi tarkibiy qismlarni taqdim qilsangiz, bu juda kam uchraydi. Styled-komponentlar uchun ListView ishlashi, hatto juda katta komponentlar to'plamlari uchun o'rnatilgan uslublarning ishlashi bilan deyarli bir xil. Sizning tarkibiy qismlaringiz va ekranlaringizga moslashtirilgan tarkibiy qismlarning konteksti va o'qilishi miqdori ko'p holatlarda unchalik katta bo'lmagan xarajatlarga (agar mavjud bo'lsa) arziydi. Miyamda hech qanday shubha yo'q, chunki uslubning tarkibiy qismlarini kelajakda yangilash jarayoni sodir bo'lganda, biz ishlash unumdorligi yanada kichiklasha boshlaydi.

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