Perbandingan Kinerja Cepat dari Style-Components vs Inline Styles di React Native

Saya sering bertanya-tanya apa perbedaan kinerja antara komponen-komponen gaya dan gaya sebaris ketika datang ke React Native. Di sini, saya akan membandingkan keduanya dengan beberapa test case. Saya akan menggunakan 2 versi berbeda dari komponen yang ditata untuk pengujian saya, satu versi menjadi rilis terbaru dan versi lainnya berasal dari cabang utama (https://github.com/styled-components/styled-components). Sejak Max Stoiber, telah memberi tahu saya bahwa mereka telah melakukan beberapa optimasi kinerja pada master.

Kasing uji pertama yang saya miliki menyertakan ScrollView yang akan membuat 10.000 elemen. Kami menggunakan ScrollView daripada ListView karena ListView dioptimalkan untuk kumpulan data besar, dan itu tidak membuat semua data sekaligus.
Sementara ScrollView merender semua komponen turunannya sekaligus.

Saya membuat 2 layar berbeda yang masing-masing ditempati ListView dan ScrollView, dengan komponen anak dibuat menggunakan komponen gaya dan gaya inline.

Inilah test-screen.js, ini adalah layar yang memiliki gaya inline. Ini mengandung fungsi renderListView & renderScrollView (menukar ketika saya menguji, daripada membuat layar yang berbeda)

impor Bereaksi, {Komponen} dari 'react';
import {ListView, ScrollView, StyleSheet, View, Text} dari 'react-native';
impor testData dari './test-data';
const styles = StyleSheet.create ({
  baris: {
    paddingTop: 5,
    paddingBawah: 5,
    borderBottomLebar: 1,
    borderBottomColor: 'grey',
  },
  scrollView: {
    fleksibel: 1,
  },
});
kelas TestScreen memperluas Component {
  constructor (alat peraga) {
    super (alat peraga);
    const ds = ListView.DataSource baru ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} components`);
    console.time ('inline');
  }
componentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (baris) {
    return   {row.name}  ;
  }
renderListView () {
    kembali (
      
    );
  }
renderScrollView () {
    kembali (
      
        {testData.map ((baris, indeks) => (
            {row.name}  
        ))}
      
    );
  }
render () {
    kembalikan this.renderListView ();
  }
}
ekspor TestScreen default;

Ini adalah test-screen-styled.js, dan termasuk semua komponen bahkan ListView dan ScrollView yang diinisialisasi dengan komponen-komponen yang ditata.

impor Bereaksi, {Komponen} dari 'react';
impor {ListView} dari 'react-native';
impor bergaya dari 'komponen-gaya / asli';
impor testData dari './test-data';
const Row = styled.View`
  padding-top: 5;
  padding-bottom: 5;
  perbatasan-bawah-lebar: 1;
  border-bottom-color: abu-abu;
`;
const RowText = style.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  fleksibel: 1;
`;
const ListViewStyled = styled.ListView`
`;
class TestScreenStyled memperpanjang Component {
  constructor (alat peraga) {
    super (alat peraga);
    const ds = ListView.DataSource baru ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} components`);
    konsol.waktu ('bergaya');
  }
componentDidMount () {
    console.timeEnd ('gaya');
  }
renderRow (baris) {
    mengembalikan {row.name} ;
  }
renderListView () {
    kembali (
      
    );
  }
renderScrollView () {
    kembali (
      
        {testData.map ((baris, indeks) =>   {row.name}  )}
      
    );
  }
render () {
    kembalikan this.renderListView ();
  }
}
ekspor standar TestScreenStyled;

Hasil Kinerja

Versi saat ini dari komponen yang ditata berperforma jauh lebih baik daripada versi rilis terbaru. Ada perbedaan kinerja 1–2 detik dalam versi rilis terbaru komponen vs master dalam tes ScrollView. Saya hanya menguji waktu yang diperlukan dari componentWillMount ke componentDidMount, untuk rendering komponen dalam ListView dan ScrollView. Ketika datang untuk merender komponen dalam jumlah lebih kecil (1000 ke bawah) dalam ScrollView atau menggunakan ListView untuk merender komponen dalam jumlah berapa pun, maka perbedaannya dapat diabaikan antara komponen yang ditata dan gaya inline.

Saat Anda merender komponen dalam jumlah besar dalam daftar, Anda ingin menggunakan ListView daripada ScrollView, karena ScrollView hanya memuat semuanya sekaligus. Jadi, Anda tidak akan pernah benar-benar menggunakan ScrollView untuk merender komponen besar. Perbedaan waktu antara rendering komponen dalam ListView dalam komponen-gaya dengan gaya inline, cukup kecil untuk semua jumlah komponen yang berbeda yang diberikan. Bahkan ketika datang untuk merender komponen dalam jumlah besar di ScrollView, versi terbaru tentang master untuk komponen yang ditata datang cukup dekat dengan gaya inline.

Kesimpulan

Komponen-komponen yang ditata semakin dekat dan semakin dekat untuk menjadi secepat gaya inline. Saya menyarankan semua orang untuk mencobanya di proyek mereka, sangat jarang jika Anda benar-benar membuat komponen dalam jumlah besar di ScrollView. Kinerja ListView untuk komponen yang ditata hampir sama dengan kinerja gaya sebaris bahkan untuk set komponen yang sangat besar. Jumlah konteks dan keterbacaan yang disediakan oleh komponen bergaya untuk komponen dan layar Anda sepadan dengan biaya kinerja yang kecil (jika ada) dalam banyak hal. Saya tidak ragu dalam pikiran saya ketika pembaruan masa depan untuk komponen yang ditata terjadi, kita akan mulai melihat kesenjangan kinerja menjadi lebih kecil.

Repo ada di sini: https://github.com/jm90m/rn-styled-components-performance