Una comparación rápida de rendimiento de componentes con estilo frente a estilos en línea en React Native

A menudo me he preguntado cuáles eran las diferencias de rendimiento entre los componentes con estilo y los estilos en línea cuando se trata de React Native. Aquí, compararé los dos con varios casos de prueba. Usaré 2 versiones diferentes de componentes con estilo para mi prueba, una versión es la última versión y la otra versión proviene de la rama maestra (https://github.com/styled-components/styled-components). Desde Max Stoiber, me había informado que habían hecho algunas optimizaciones de rendimiento en master.

El primer caso de prueba que tengo incluye un ScrollView que representará 10,000 elementos. Usamos ScrollView en lugar de ListView, ya que ListView está optimizado para grandes conjuntos de datos y no procesa todos los datos a la vez.
Mientras ScrollView representa todos sus componentes secundarios de reacción a la vez.

Creé 2 pantallas diferentes que albergaban ListView y ScrollView, con componentes secundarios creados con componentes con estilo y estilos en línea.

Aquí está test-screen.js, esta es la pantalla que tiene estilos en línea. Contiene las funciones renderListView y renderScrollView (intercambiarlas cuando pruebo, en lugar de crear una pantalla diferente)

import React, {Component} de 'react';
importar {ListView, ScrollView, StyleSheet, View, Text} desde 'react-native';
importar testData desde './test-data';
const styles = StyleSheet.create ({
  fila: {
    relleno: 5,
    acolchado Parte inferior: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'gris',
  },
  scrollView: {
    flex: 1,
  },
});
clase TestScreen extiende Componente {
  constructor (accesorios) {
    super (accesorios);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Representación de $ {testData.length} componentes`);
    console.time ('en línea');
  }
componentDidMount () {
    console.timeEnd ('en línea');
  }
renderRow (fila) {
    return   {row.name}  ;
  }
renderListView () {
    regreso (
      
    );
  }
renderScrollView () {
    regreso (
      
        {testData.map ((fila, índice) => (
            {row.name}  
        ))}
      
    );
  }
render () {
    devuelve this.renderListView ();
  }
}
exportar TestScreen predeterminado;

Aquí está test-screen-styled.js, e incluye todos los componentes, incluso ListView y ScrollView inicializados con componentes con estilo.

import React, {Component} de 'react';
importar {ListView} desde 'react-native';
importar con estilo desde 'componentes con estilo / nativo';
importar testData desde './test-data';
const Row = styled.View`
  acolchado: 5;
  relleno inferior: 5;
  ancho del borde inferior: 1;
  color del borde inferior: gris;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  flexión: 1;
`;
const ListViewStyled = styled.ListView`
`;
clase TestScreenStyled extiende Componente {
  constructor (accesorios) {
    super (accesorios);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Representación de $ {testData.length} componentes`);
    console.time ('estilo');
  }
componentDidMount () {
    console.timeEnd ('estilo');
  }
renderRow (fila) {
    return {row.name} ;
  }
renderListView () {
    regreso (
      
    );
  }
renderScrollView () {
    regreso (
      
        {testData.map ((row, index) =>   {row.name}  )}
      
    );
  }
render () {
    devuelve this.renderListView ();
  }
}
exportar TestScreenStyled predeterminado;

Resultados de rendimiento

La versión actual de los componentes con estilo funcionó mucho mejor que la última versión de lanzamiento. Hay una diferencia de rendimiento de aproximadamente 1 a 2 segundos en la última versión de componentes con estilo frente a master en las pruebas ScrollView. Solo probé el tiempo que tomó desde componentWillMount a componentDidMount, para representar componentes en ListView y ScrollView. Cuando se trata de representar una cantidad menor de componentes (1000 y menos) en un ScrollView o usar ListView para representar cualquier cantidad de componentes, la diferencia es insignificante entre los componentes con estilo y los estilos en línea.

Cuando renderiza grandes cantidades de componentes en una lista, desearía usar ListView en lugar de ScrollView, ya que ScrollView simplemente carga todo de una vez. Por lo tanto, nunca usaría un ScrollView para representar un gran conjunto de componentes. La diferencia de tiempo entre renderizar componentes en un ListView en componentes con estilo y estilos en línea es bastante pequeña para todas las diferentes cantidades de componentes renderizados. Incluso cuando se trata de representar grandes cantidades de componentes en ScrollView, la última versión en master para componentes con estilo se acerca bastante a los estilos en línea.

Conclusión

Los componentes con estilo se acercan cada vez más a ser tan rápidos como los estilos en línea. Recomiendo a todos que lo prueben en su proyecto, es bastante raro si alguna vez representará grandes cantidades de componentes en un ScrollView. El rendimiento de ListView para componentes con estilo es casi el mismo que el de los estilos en línea, incluso para conjuntos de componentes extremadamente grandes. La cantidad de contexto y legibilidad que los componentes con estilo proporcionan a sus componentes y pantallas bien valen los pequeños costos de rendimiento (si los hay) en muchos casos. No tengo dudas en mi mente a medida que se realicen futuras actualizaciones de los componentes con estilo, comenzaremos a ver que la brecha de rendimiento se vuelve aún más pequeña.

El repositorio está aquí: https://github.com/jm90m/rn-styled-components-performance