Një krahasim i shpejtë i performancës së përbërësve të stiluar vs stilet inline në vendasin reaktiv

Shpesh kam pyetur veten se cilat ishin ndryshimet e performancës midis komponentëve të stiluar dhe stilet inline kur bëhet fjalë për React Native. Këtu, do t'i krahasoj të dy me disa raste provash. Unë do të përdor 2 versione të ndryshme të përbërësve të stiluar për provën time, një version është versioni më i ri dhe versioni tjetër që vjen nga dega master (https://github.com/styled-compectors/styled-component). Që nga Max Stoiber, më kishte njoftuar se kishin bërë disa optimizime të performancës për master.

Rasti i parë i provës që unë kam përfshin një ScrollView që do të japë 10,000 elementë. Ne përdorim ScrollView sesa ListView pasi ListView është optimizuar për grupe të mëdha të të dhënave dhe nuk i jep të gjitha të dhënat menjëherë.
Ndërsa ScrollView i jep të gjithë përbërësit e saj të reagimit të fëmijëve menjëherë.

Kam krijuar 2 ekrane të ndryshme që secila kishte një ListView dhe ScrollView, me përbërës të fëmijëve të krijuar duke përdorur përbërës të stiluar dhe stile brenda.

Këtu është ekrani i provave.js, ky është ekrani që ka stile të brendshme. Ai përmban të dy funksionet renderListView & renderScrollView (shkëmbimi i tyre kur i provoj, në vend se të krijoni një ekran të ndryshëm)

React importi, {Komponenti} nga react reagoni ’;
importoni {ListView, ScrollView, StyleSheet, Pamje, Tekst} nga 'reagimi-amtare';
testin e importitData nga './test-data';
stilet const = StyleSheet.create ({
  rresht: {
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'gri',
  }
  scrollView:
    përkul: 1,
  }
});
Testi i ekranit i klasës shtrihet Komponenti
  konstruktor (props) {
    super (props);
    const ds = ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    kjo.state =
      burimi i të dhënave: ds.cloneWithRows (testData),
    };
  }
përbërësiWillMount ()
    tastierë.log (`ListaView - Rendering $ {testData.lgment} përbërësit`);
    console.time ( 'ndërfutur');
  }
komponentDidMount ()
    console.timeEnd ( 'ndërfutur');
  }
rendnderRow (rresht)
    kthej   {rreshtin.name T  ;
  }
renderListView ()
    kthimi (
      
    );
  }
rendnderScrollView ()
    kthimi (
      
        {testData.map ((rresht, indeks))>>
            {rreshtin.name}  
        ))}
      
    );
  }
jap ()
    ktheni këtë.renderListView ();
  }
}
eksportimi i paracaktuar i TestScreen;

Këtu është i stiluari me ekran.js, dhe përfshin të gjithë përbërësit edhe ListView dhe ScrollView të inicializuar me përbërës të stiluar.

React importi, {Komponenti} nga react reagoni ’;
importoni {ListView} nga 'reagimi-vendor';
importi i stilizuar nga 'përbërës të stilizuar / vendas';
testin e importitData nga './test-data';
konst Row = stiluar.View`
  mbushje e sipërme: 5;
  mbushje-fund: 5;
  gjerësia kufitare-fundore: 1;
  kufiri-ngjyra e poshtme: gri;
`;
const RowText = stiluar.Teksti`
`;
con ScrollViewStyled = stiluar.ScrollView`
  përkul: 1;
`;
const ListViewStyled = stiluar.ListView`
`;
Testi i ekranit të klasës shtrihet përbërësi {
  konstruktor (props) {
    super (props);
    const ds = ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    kjo.state =
      burimi i të dhënave: ds.cloneWithRows (testData),
    };
  }
  përbërësiWillMount ()
    tastierë.log (`ListaView - Rendering $ {testData.lgment} përbërësit`);
    console.time ( 'vetëquajtur');
  }
komponentDidMount ()
    console.timeEnd ( 'vetëquajtur');
  }
rendnderRow (rresht)
    kthimin {row.name} ;
  }
renderListView ()
    kthimi (
      
    );
  }
rendnderScrollView ()
    kthimi (
      
        {testData.map ((rresht, indeks))>> keyelësi i rreshtit = {indeksi}>  {rresht.name}  )}
      
    );
  }
jap ()
    ktheni këtë.renderListView ();
  }
}
eksportimi i paracaktuar TestScreenStyled;

Rezultatet e Performancës

Versioni aktual i komponentëve të stiluar ka ecur më mirë sesa versioni i fundit i lëshimit. Ekziston rreth një ndryshim i performancës 1–2 sekondë në përbërësit e stiluar versioni më i fundit i versionit të lëshuar kundrejt master në testet ScrollView. Kam provuar vetëm kohën që ka marrë nga komponentiWillMount në компонентаDidMount, për të dhënë komponentë në të dy ListView dhe ScrollView. Kur është fjala për të dhënë sasi më të vogël të përbërësve (1000 dhe nën) në një ScrollView ose duke përdorur ListView për dhënien e ndonjë sasie përbërësish, atëherë ndryshimi është i papërfillshëm midis përbërësve të stiluar dhe stileve brenda.

Kur po bëni sasi të mëdha komponentësh në një listë, do të dëshironit të përdorni një ListView sesa një ScrollView, pasi që ScrollView thjesht ngarkon gjithçka menjëherë. Kështu që ju kurrë nuk do të përdorni vërtet një ScrollView për të dhënë një grup të madh komponentësh. Diferenca kohore midis komponentëve të dhënë në një ListView në komponentët e stiluar përkundrejt stileve të brendshme, është mjaft e vogël për të gjitha sasitë e ndryshme të përbërësve të dhënë. Edhe kur bëhet fjalë për dhënien e sasive të mëdha të komponentëve në ScrollView, versioni i fundit në master për komponentët e stiluar është mjaft afër stileve të brendshme.

përfundim

Komponentët e stiluar po afrohen gjithnjë e më shumë për të qenë aq shpejt sa stilet inline. Unë rekomandoj që të gjithë ta provojnë në projektin e tyre, është shumë e rrallë nëse ndonjëherë që në të vërtetë do të bësh sasi të mëdha komponentësh në një ScrollView. Performanca ListView për përbërësit e stiluar është pothuajse e njëjtë me performancën e stileve inline edhe për grupe përbërësish jashtëzakonisht të mëdha. Sasia e kontekstit dhe lexueshmëria që përbërësit e stiluar u sigurojnë komponentëve dhe ekraneve tuaja ia vlen shumë kostot e vogla të performancës (nëse ka) në shumë raste. Nuk kam asnjë dyshim në mendjen time pasi përditësimet e ardhshme të komponentëve të stilizuar ndodhin, ne do të fillojmë të shohim që hendeku i performancës bëhet edhe më i vogël.

Repo është këtu: https://github.com/jm90m/rn-styled-component-performance