React Native - Düz bir nesne yerine StyleSheet kullanmanın faydası nedir?

StyleSheet.create()Düz bir nesne kullanmanın tam olarak faydası nedir ?

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

Vs.

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

Doğrudan React native'in StyleSheet.js'nin yorum bölümünden alıntı yapma

Kod kalitesi:

• Stilleri oluşturma işlevinden uzaklaştırarak, kodun anlaşılmasını kolaylaştırırsınız.

• Stilleri adlandırmak, oluşturma işlevindeki düşük seviyeli bileşenlere anlam katmanın iyi bir yoludur.

Verim:

• Bir stil nesnesinden bir stil sayfası yapmak, her seferinde yeni bir stil nesnesi oluşturmak yerine ona ID ile başvurmayı mümkün kılar.

• Ayrıca, stili köprüden yalnızca bir kez göndermeye izin verir. Sonraki tüm kullanımlar bir kimliğe atıfta bulunacaktır (henüz uygulanmamıştır).

Ayrıca StyleSheet, stil sayfası içeriğinizi de doğrular. Bu nedenle, StyleSheet gerçekten uygulandığında çalışma zamanında değil, derleme sırasında yanlış stil özelliğine ilişkin herhangi bir hata gösterilir.

Faydası yok. Dönem.

Efsane 1: StyleSheetDaha performanslı

StyleSheetDışında bildirilen bir nesne arasında kesinlikle hiçbir performans farkı yoktur render( renderher seferinde yeni bir nesne oluşturuyorsanız bu farklı olacaktır ). Performans farkı bir efsanedir.

Efsanenin kaynağı muhtemelen React Native ekibinin bunu yapmaya çalışmasından kaynaklanıyor, ancak başarılı olamadılar. Resmi belgelerin hiçbir yerinde performans hakkında hiçbir şey bulamazsınız: https://facebook.github.io/react-native/docs/stylesheet.html , kaynak kodu ise "henüz uygulanmadı" ifadesini kullanıyor : https://github.com/ facebook / react-native / blob / master / Kitaplıklar / StyleSheet / StyleSheet.js # L207

Efsane 2: StyleSheetstil nesnesini derleme zamanında doğrular

Bu doğru değil. Düz JavaScript, derleme zamanında nesneleri doğrulayamaz.

İki şey:

• Çalışma zamanında doğrulanır, ancak stil nesnesini bir bileşene ilettiğinizde de geçerlidir. Fark yok.
• Flow veya TypeScript kullanıyorsanız , derleme zamanında doğrulanır , ancak nesneyi bir bileşene stil desteği olarak ilettiğinizde veya aşağıdaki gibi düzgün bir şekilde yazı yazdığınızda da geçer. Fark yok.

const containerStyle: ViewStyle = {
   ...
}

Kabul edilen cevap, OP sorusuna bir cevap değildir.

Soru, satır içi stiller ile constsınıf dışı arasındaki fark değil, neden StyleSheet.createdüz bir nesne yerine kullanmamız gerektiğidir .

Biraz araştırdıktan sonra bulduğum şey şudur (herhangi bir bilginiz varsa lütfen güncelleyin). Avantajları StyleSheet.createaşağıdaki gibi olmalıdır:

1. Stilleri doğrular
2. Daha iyi performanslar çünkü stillerin bir kimlik ile eşlenmesini yaratır ve her seferinde yeni bir nesne oluşturmak yerine bu kimlik ile içeriye başvurur. Dolayısıyla, aygıtları güncelleme işlemi bile daha hızlıdır çünkü her seferinde tüm yeni nesneleri göndermezsiniz.

Bu bir StyleSheet kullanarak daha fazla ölçülebilir olduğunu dikkate alınması için kullanılır ve oldu tavsiye sürümü 0.57 kadar RN ekibi varan bu nedenle, ancak doğru da belirtildiği gibi şimdi artık tavsiye edilir başka bir yanıt bu soruya.

RN belgeleri şimdi, aşağıdaki nedenlerle StyleSheet önerir ben bu nedenler işlemek fonksiyonu dışında oluşturulan düz nesnelere aynı ölçüde geçerlidir düşünüyorum gerçi:

• Stilleri oluşturma işlevinden uzaklaştırarak, kodun anlaşılmasını kolaylaştırırsınız.
• Stilleri adlandırmak, oluşturma işlevindeki düşük seviyeli bileşenlere anlam katmanın iyi bir yoludur.

Bu yüzden sizce edilmektedir düz nesneler üzerinde StyleSheet kullanarak olası yararları?

1) Aksine iddialara rağmen RN v0.59.10 benim test size gösterir yapmak çağrılırken bazı doğrulama almak StyleSheet.create()ve typescript (ve muhtemelen akış) da derleme zamanında hata bildirir. Derleme zamanı kontrolü olmadan bile , özellikle bu stilleri kullanan bileşenlerin koşullu olarak işlenebildiği durumlarda, stillerin işleme için kullanılmadan önce çalışma zamanı doğrulamasını yapmanın hala faydalı olduğunu düşünüyorum . Bu, tüm işleme senaryolarını test etmek zorunda kalmadan bu tür hataların alınmasına izin verecektir.

2) StyleSheet göz önüne alındığında edilir hala gelecekte performansını artırmak için StyleSheet kullanmanın umutlar olabilir ve onlar örneğin sıra aklında başka olası iyileştirmeler, olabilir RN ekibi tarafından önerilen:

3) Mevcut StyleSheet.create()çalışma zamanı doğrulaması kullanışlıdır, ancak biraz sınırlıdır. Akış veya daktilo ile elde edeceğiniz tür denetimi ile sınırlı görünüyor, bu nedenle flex: "1"veya deyin borderStyle: "rubbish", ancak width: "rubbish"bu bir yüzde dizesi olabileceği için değil . RN ekibinin gelecekte yüzde dizeleri veya aralık sınırları gibi şeyleri kontrol ederek bu tür doğrulamayı iyileştirmesi veya StyleSheet.create()daha kapsamlı bir doğrulama yapmak için kendi işlevinizi toparlamanız mümkündür.

4) StyleSheet kullanarak belki de daha fazlasını sunan react-native-genişletilmiş-stil sayfası gibi üçüncü taraf alternatiflere / uzantılara geçişi kolaylaştırıyorsunuz .

Stillerinizi oluşturma StyleSheet.create yalnızca genel değişken __DEV__doğru olarak ayarlandığında (veya Android veya IOS öykünücüler içinde çalışırken React Native DEV ve PROD değişkenlerine bakın ) doğrulamayı geçecektir.

İşlev kaynak kodu oldukça basittir:

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;
}

Geliştirme sırasında çalışma zamanı doğrulaması yaptığı için kullanmanızı tavsiye ederim, ayrıca nesneyi dondurur.

Arasında herhangi bir fark bulamadım StyleSheetTypeScript'te doğrulama yazmanın dışında ve düz nesne bulamadım.

Örneğin, bu (yazım farklılıklarına dikkat edin):

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,
  },
});

şuna eşittir:

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,
  },
};