Een snelle prestatievergelijking van stijlcomponenten versus inline stijlen in React Native

Ik heb me vaak afgevraagd wat de prestatieverschillen waren tussen stijlcomponenten en inline-stijlen als het gaat om React Native. Hier zal ik de twee vergelijken met verschillende testgevallen. Ik zal 2 verschillende versies van stijlcomponenten gebruiken voor mijn test, waarbij de ene versie de nieuwste release is en de andere versie uit de hoofdtak (https://github.com/styled-components/styled-components). Sinds Max Stoiber me had laten weten dat ze wat prestatie-optimalisaties op master hadden gedaan.

De eerste testcase die ik heb bevat een ScrollView die 10.000 elementen zal weergeven. We gebruiken ScrollView in plaats van ListView, omdat ListView is geoptimaliseerd voor big data-sets en niet alle gegevens in één keer weergeeft.
Terwijl ScrollView alle reagerende onderliggende componenten in één keer weergeeft.

Ik heb 2 verschillende schermen gemaakt met elk een ListView en ScrollView, met onderliggende componenten die zijn gemaakt met stijlcomponenten en inline stijlen.

Hier is het testscherm.js, dit is het scherm met inline-stijlen. Het bevat zowel een renderListView & renderScrollView-functies (ze verwisselen wanneer ik test, in plaats van een ander scherm te maken)

import React, {Component} van 'react';
import {ListView, ScrollView, StyleSheet, View, Text} uit 'react-native';
import testData van './test-data';
const styles = StyleSheet.create ({
  rij: {
    paddingTop: 5,
    vulling Onder: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'grey',
  },
  scrollView: {
    flex: 1,
  },
});
klasse TestScreen breidt component {uit
  constructor (props) {
    super (stutten);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} componenten`);
    console.time ( 'inline');
  }
componentDidMount () {
    console.timeEnd ( 'inline');
  }
renderRow (row) {
    terug   {row.name}  ;
  }
renderListView () {
    terug (
      
    );
  }
renderScrollView () {
    terug (
      
        {testData.map ((row, index) => (
            {row.name}  
        ))}
      
    );
  }
render () {
    retourneer this.renderListView ();
  }
}
standaard TestScreen exporteren;

Hier is test-screen-stijl.js, en het bevat alle componenten, zelfs de ListView en ScrollView geïnitialiseerd met stijl-componenten.

import React, {Component} van 'react';
import {ListView} uit 'react-native';
gestileerd importeren uit 'stijl-componenten / native';
import testData van './test-data';
const Rij = stijl.View`
  padding-top: 5;
  vulling bodem: 5;
  rand-bodem-breedte: 1;
  border-bottom-color: grijs;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  flex: 1;
`;
const ListViewStyled = styled.ListView`
`;
class TestScreenStyled breidt component {uit
  constructor (props) {
    super (stutten);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ $ testData.length} componenten`);
    console.time ( 'gestyled');
  }
componentDidMount () {
    console.timeEnd ( 'gestyled');
  }
renderRow (row) {
    retourneer {row.name} ;
  }
renderListView () {
    terug (
      
    );
  }
renderScrollView () {
    terug (
      
        {testData.map ((row, index) =>   {row.name}  )}
      
    );
  }
render () {
    retourneer this.renderListView ();
  }
}
standaard TestScreenStyled exporteren;

Prestatieresultaten

De huidige versie van stijlcomponenten presteerde veel beter dan de nieuwste releaseversie. Er is ongeveer een 1-2 seconden prestatieverschil in de nieuwste releaseversie van stijl-componenten versus master in de ScrollView-tests. Ik heb alleen de tijd getest die het kostte van componentWillMount tot componentDidMount, voor het renderen van componenten in zowel ListView als ScrollView. Als het gaat om het renderen van een kleiner aantal componenten (1000 en lager) in een ScrollView of het gebruik van de ListView voor het renderen van een willekeurig aantal componenten, dan is het verschil te verwaarlozen tussen stijl-componenten en inline stijlen.

Wanneer u grote hoeveelheden componenten in een lijst weergeeft, wilt u liever een ListView gebruiken in plaats van een ScrollView, omdat ScrollView alles in één keer laadt. U zou dus nooit echt een ScrollView gebruiken om een ​​grote set componenten weer te geven. Het tijdsverschil tussen het renderen van componenten in een ListView in stijlcomponenten versus inline stijlen, is vrij klein voor alle verschillende hoeveelheden gerenderde componenten. Zelfs als het gaat om het weergeven van grote hoeveelheden componenten in de ScrollView, komt de nieuwste versie op master voor stijlcomponenten vrij dicht bij inline stijlen.

Gevolgtrekking

Stijlcomponenten komen steeds dichterbij en zijn net zo snel als inline stijlen. Ik raad iedereen aan om het in hun project te proberen, het is vrij zeldzaam of ooit dat je in feite grote hoeveelheden componenten in een ScrollView weergeeft. De ListView-prestaties voor stijlcomponenten zijn bijna hetzelfde als de prestaties van inline-stijlen, zelfs voor extreem grote componentensets. De hoeveelheid context en leesbaarheid die stijlcomponenten bieden voor uw componenten en schermen is in veel gevallen de kleine prestatiekosten (indien aanwezig) zeker waard. Ik twijfel er niet aan wanneer toekomstige updates voor stijlcomponenten plaatsvinden, we zullen beginnen de prestatiekloof nog kleiner te zien worden.

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