Бързо сравнение на производителността на Styled-Components спрямо Inline Styles в React Native

Често съм се чудил какви са разликите в производителността между стилизираните компоненти и стиловете на инлайн, когато става дума за React Native. Тук ще сравня двете с няколко тестови случая. Ще използвам 2 различни версии на стилизирани компоненти за моя тест, като едната версия е най-новата версия, а другата версия идва от главния клон (https://github.com/styled-components/styled-components). Откакто Макс Стойбер ме беше информирал, че са направили някои оптимизации на производителността на master.

Първият тест, който имам, включва ScrollView, който ще изобрази 10 000 елемента. Ние използваме ScrollView, а не ListView, тъй като ListView е оптимизиран за големи масиви от данни и не предоставя всички данни наведнъж.
Докато ScrollView визуализира всичките си реагиращи дъщерни компоненти наведнъж.

Създадох 2 различни екрана, на които се помещаваха ListView и ScrollView, с дъщерни компоненти, създадени с помощта на стилизирани компоненти и вградени стилове.

Ето тест-screen.js, това е екранът с вградени стилове. Той съдържа както функции renderListView, така и renderScrollView (заменяйки ги, когато тествам, вместо да създавате различен екран)

import React, {Component} от 'react';
import {ListView, ScrollView, StyleSheet, View, Text} от 'react-native';
импортиране testData от './test-data';
const styles = StyleSheet.create ({
  ред: {
    подплънкиTop: 5,
    подплънкиBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'сив',
  }
  scrollView: {
    огъване: 1,
  }
});
клас TestScreen удължава Компонент {
  конструктор (подпори) {
    супер (подпори);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
компонентWillMount () {
    console.log (`ListView - рендериране на $ {testData.length} компоненти`);
    console.time ( "вградени");
  }
компонентDidMount () {
    console.timeEnd ( "вградени");
  }
renderRow (ред) {
    върнете се   {row.name}  ;
  }
renderListView () {
    връщане (
      
    );
  }
renderScrollView () {
    връщане (
      
        {testData.map ((ред, индекс) => (
          <Преглед на стил = {styles.row} key = {index}>  {row.name}  
        ))}
      
    );
  }
render () {
    върнете това.renderListView ();
  }
}
експортиране по подразбиране TestScreen;

Ето тестовия екран-styled.js и той включва всички компоненти, дори ListView и ScrollView, инициализирани със стилизирани компоненти.

import React, {Component} от 'react';
import {ListView} от „реагира-роден“;
импортиране стилизирано от 'styled-компоненти / native';
импортиране testData от './test-data';
const Row = styled.View`
  подплънки отгоре: 5;
  подложка-дъно: 5;
  граница-ширина на дъното: 1;
  цвят на границата-дъно: сив;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  флекс: 1;
`;
const ListViewStyled = styled.ListView`
`;
клас TestScreenStyled разширява Компонент {
  конструктор (подпори) {
    супер (подпори);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  компонентWillMount () {
    console.log (`ListView - рендериране на $ {testData.length} компоненти`);
    console.time ( "оформена ');
  }
компонентDidMount () {
    console.timeEnd ( "оформена ');
  }
renderRow (ред) {
    връщане {row.name} ;
  }
renderListView () {
    връщане (
      
    );
  }
renderScrollView () {
    връщане (
      
        {testData.map ((ред, индекс) => <Ключ на реда = {индекс}>  {row.name}  )}
      
    );
  }
render () {
    върнете това.renderListView ();
  }
}
експортиране по подразбиране TestScreenStyled;

Резултати от изпълнението

Текущата версия на стилизираните компоненти се представи много по-добре от най-новата версия. Има около 1-2 секунди разлика в производителността на най-новата версия на стилизираните компоненти спрямо главния в тестовете на ScrollView. Тествах само времето, което отне от компонентWillMount до компонентDidMount, за изобразяване на компоненти както в ListView, така и в ScrollView. Когато става въпрос за изобразяване на по-малко количество компоненти (1000 и по-малко) в ScrollView или използване на ListView за изобразяване на произволно количество компоненти, тогава разликата е незначителна между стилизираните компоненти и стиловете вградени.

Когато представяте големи количества компоненти в списък, бихте искали да използвате ListView, а не ScrollView, тъй като ScrollView просто зарежда всичко наведнъж. Така че никога не бихте използвали ScrollView за изобразяване на голям набор от компоненти. Разликата във времето между рендерирането на компоненти в ListView в стилизирани компоненти спрямо стилове вградена е сравнително малка за всички различни количества представени компоненти. Дори когато става въпрос за изобразяване на големи количества компоненти в ScrollView, най-новата версия на master за стилизираните компоненти е доста близка до стиловете вградени.

заключение

Стилизираните компоненти се приближават и се приближават до бързината като вградени стилове. Препоръчвам на всички да го опитат в своя проект, доста рядко е, ако изобщо някога ще рендерирате големи количества компоненти в ScrollView. Производителността на ListView за стилизираните компоненти е почти еднаква с производителността на вградените стилове, дори за изключително големи набори от компоненти. Количеството контекст и четимост, които стилизираните компоненти предоставят на вашите компоненти и екрани, струва си струва малките разходи за производителност (ако има такива) в много случаи. Не се съмнявам в съзнанието си, тъй като бъдещите актуализации на стилизираните компоненти се случват, ще започнем да виждаме, че разликата в производителността става още по-малка.

Repo е тук: https://github.com/jm90m/rn-styled-components-performance