React Native - Apa keuntungan menggunakan StyleSheet vs objek biasa?

Apa sebenarnya keuntungan menggunakan StyleSheet.create()vs objek biasa?

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
}

Vs.

const styles = {
  container: {
    flex: 1
  }
}

Mengutip langsung dari bagian komentar StyleSheet.js dari React native

Kualitas kode:

• Dengan menjauhkan gaya dari fungsi render, Anda membuat kode lebih mudah dipahami.

• Memberi nama gaya adalah cara yang baik untuk menambahkan makna pada komponen tingkat rendah dalam fungsi render.

Performa:

• Membuat stylesheet dari objek gaya memungkinkan untuk merujuknya dengan ID alih-alih membuat objek gaya baru setiap saat.

• Ini juga memungkinkan untuk mengirim gaya hanya sekali melalui jembatan. Semua penggunaan selanjutnya akan merujuk sebuah id (belum diimplementasikan).

StyleSheet juga memvalidasi konten stylesheet Anda. Jadi, kesalahan apa pun dari properti gaya yang salah ditampilkan pada saat kompilasi bukan pada waktu proses ketika StyleSheet benar-benar diimplementasikan.

Tidak ada manfaatnya. Titik.

Mitos 1: StyleSheetLebih Berkinerja

Sama sekali tidak ada perbedaan kinerja antara StyleSheetdan objek yang dideklarasikan di luar render(akan berbeda jika Anda membuat objek baru di dalam rendersetiap saat). Perbedaan kinerja hanyalah mitos.

Asal mula mitos kemungkinan besar karena tim React Native mencoba melakukan ini, tetapi mereka tidak berhasil. Tidak ada di dalam dokumen resmi Anda akan menemukan apa pun tentang kinerja: https://facebook.github.io/react-native/docs/stylesheet.html , sementara kode sumber menyatakan "belum diterapkan": https://github.com/ facebook / react-native / blob / master / Libraries / StyleSheet / StyleSheet.js # L207

Mitos 2: StyleSheetmemvalidasi objek gaya pada waktu kompilasi

Ini tidak benar. JavaScript biasa tidak dapat memvalidasi objek pada waktu kompilasi.

Dua hal:

• Itu memvalidasi saat runtime, tetapi begitu juga saat Anda meneruskan objek gaya ke sebuah komponen. Tidak ada perbedaan.
• Itu memvalidasi pada waktu kompilasi jika Anda menggunakan Flow atau TypeScript , tetapi begitu juga setelah Anda meneruskan objek sebagai prop gaya ke sebuah komponen, atau jika Anda mengetikkan objek dengan benar seperti di bawah ini. Tidak ada perbedaan juga.

const containerStyle: ViewStyle = {
   ...
}

Jawaban yang diterima bukanlah jawaban untuk pertanyaan OP.

Pertanyaannya bukanlah perbedaan antara gaya sebaris dan di constluar kelas, tetapi mengapa kita harus menggunakan StyleSheet.createobjek biasa sebagai pengganti.

Setelah sedikit meneliti apa yang saya temukan adalah yang berikut (perbarui jika Anda memiliki info). Keuntungan dari StyleSheet.createharus sebagai berikut:

1. Ini memvalidasi gaya
2. Performa yang lebih baik karena membuat pemetaan gaya ke ID, dan kemudian merujuk ke dalam dengan ID ini, alih-alih membuat objek baru setiap kali. Jadi, bahkan proses memperbarui perangkat lebih cepat karena Anda tidak mengirim semua objek baru setiap saat.

Dulu dianggap bahwa menggunakan stylesheet lebih performant, dan itu dianjurkan untuk alasan ini oleh tim RN sampai versi 0.57, tetapi sekarang tidak lagi direkomendasikan sebagai benar menunjukkan di jawaban lain untuk pertanyaan ini.

The dokumentasi RN sekarang merekomendasikan StyleSheet karena alasan berikut, meskipun saya pikir alasan ini akan berlaku untuk benda-benda biasa yang dibuat di luar fungsi render:

• Dengan menjauhkan gaya dari fungsi render, Anda membuat kode lebih mudah dipahami.
• Memberi nama gaya adalah cara yang baik untuk menambahkan makna pada komponen tingkat rendah dalam fungsi render.

Jadi apa yang saya pikir adalah manfaat yang mungkin menggunakan Stylesheet atas benda biasa?

1) Meskipun klaim yang bertentangan pengujian saya di RN v0.59.10 menunjukkan bahwa Anda lakukan mendapatkan beberapa validasi saat memanggil StyleSheet.create()dan naskah (dan mungkin mengalir) juga akan melaporkan kesalahan pada waktu kompilasi. Bahkan tanpa pemeriksaan waktu kompilasi, saya pikir masih bermanfaat untuk melakukan validasi run time gaya sebelum digunakan untuk rendering, terutama di mana komponen yang menggunakan gaya tersebut dapat dirender secara bersyarat. Ini akan memungkinkan kesalahan tersebut diambil tanpa harus menguji semua skenario rendering.

2) Mengingat bahwa Stylesheet yang direkomendasikan oleh tim RN mereka mungkin masih memiliki harapan menggunakan stylesheet untuk meningkatkan kinerja di masa depan, dan mereka mungkin memiliki perbaikan lain yang mungkin dalam pikiran juga, misalnya:

3) StyleSheet.create()Validasi run-time saat ini berguna, tetapi agak terbatas. Tampaknya dibatasi pada jenis pemeriksaan yang akan Anda dapatkan dengan aliran atau skrip ketikan, jadi akan mengambil katakan flex: "1"atau borderStyle: "rubbish", tetapi tidak width: "rubbish"karena itu bisa menjadi string persentase. Ada kemungkinan bahwa tim RN dapat meningkatkan validasi tersebut di masa mendatang dengan memeriksa hal-hal seperti string persentase, atau batas rentang, atau Anda dapat menggabungkan StyleSheet.create()fungsi Anda sendiri untuk melakukan validasi yang lebih ekstensif.

4) Dengan menggunakan StyleSheet, Anda mungkin mempermudah transisi ke alternatif / ekstensi pihak ketiga seperti react-native-extended-stylesheet yang menawarkan lebih banyak.

Membuat gaya Anda melalui StyleSheet.createakan melewati validasi hanya ketika variabel global __DEV__disetel ke true (atau saat berjalan di dalam emulator Android atau IOS, lihat variabel React Native DEV dan PROD )

Kode sumber fungsi cukup sederhana:

create < +S: ____Styles_Internal > (obj: S): $ReadOnly < S > {
  // TODO: This should return S as the return type. But first,
  // we need to codemod all the callsites that are typing this
  // return value as a number (even though it was opaque).
  if (__DEV__) {
    for (const key in obj) {
      StyleSheetValidation.validateStyle(key, obj);
      if (obj[key]) {
        Object.freeze(obj[key]);
      }
    }
  }
  return obj;
}

Saya akan merekomendasikan menggunakannya karena ia melakukan validasi run-time selama pengembangan, juga membekukan objek.

Saya tidak menemukan perbedaan apa pun di antara StyleSheetdan objek biasa, kecuali mengetik validasi di TypeScript.

Misalnya, ini (perhatikan perbedaan pengetikan):

import { View, Text, Image, StyleSheet } from 'react-native';
import logo from './logo.svg';

export default class App extends Component {
  render() {
    return (
      <View style={styles.someViewStyle}>
        <Text style={styles.someTextStyle}>Text Here</Text>
        <Image style={styles.someImageStyle} source={logo} />
      </View>
    );
  }
}

const styles: StyleSheet.create({
  someViewStyle: {
    backgroundColor: '#FFF',
    padding: 10,
  },
  someTextStyle: {
    fontSize: 24,
    fontWeight: '600',
  },
  someImageStyle: {
    height: 50,
    width: 100,
  },
});

sama dengan ini:

import { View, Text, Image, ViewStyle, TextStyle, ImageStyle } from 'react-native';
import logo from './logo.svg';

export default class App extends Component {
  render() {
    return (
      <View style={styles.someViewStyle}>
        <Text style={styles.someTextStyle}>Text Here</Text>
        <Image style={styles.someImageStyle} source={logo} />
      </View>
    );
  }
}

const styles: {
  someViewStyle: ViewStyle;
  someTextStyle: TextStyle;
  someImageStyle: ImageStyle;
} = {
  someViewStyle: {
    backgroundColor: '#FFF',
    padding: 10,
  },
  someTextStyle: {
    fontSize: 24,
    fontWeight: '600',
  },
  someImageStyle: {
    height: 50,
    width: 100,
  },
};