React Native - स्टाइलशीट बनाम सादे वस्तु के उपयोग से क्या लाभ है?

Question

StyleSheet.create()बनाम एक सादे वस्तु का उपयोग करने का वास्तव में क्या लाभ है ?

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

बनाम

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

Comments

मुझे गुणों के लिए VSCode intellisense समर्थन मिलता है। यही लाभ है।

— नरक

Answer 1

StyleSheet.js की प्रतिक्रिया अनुभाग के टिप्पणी अनुभाग से सीधे उद्धृत

कोड गुणवत्ता:

• रेंडर फ़ंक्शन से शैलियों को स्थानांतरित करके, आप कोड को समझना आसान बना रहे हैं।

• रेंडरिंग फ़ंक्शन में शैलियों को नाम देना निम्न स्तर के घटकों में अर्थ जोड़ने का एक अच्छा तरीका है।

प्रदर्शन:

• स्टाइल ऑब्जेक्ट से एक स्टाइलशीट बनाना हर बार एक नई शैली ऑब्जेक्ट बनाने के बजाय आईडी द्वारा इसे संदर्भित करना संभव बनाता है।

• यह पुल के माध्यम से केवल एक बार शैली भेजने की अनुमति देता है। बाद के सभी उपयोग एक आईडी (अभी तक लागू नहीं) का उल्लेख करने जा रहे हैं।

साथ ही स्टाइलशीट आपकी स्टाइलशीट सामग्री को भी मान्य करता है। इसलिए गलत स्टाइल प्रॉपर्टी की किसी भी त्रुटि को रनटाइम के बजाय संकलन के समय दिखाया जाता है जब स्टाइलशीट वास्तव में लागू किया जाता है।

Comments

पहले तीन बुलेट पॉइंट ओपी के रेंडर फंक्शन के बाहर स्टाइल ऑब्जेक्ट को कास्ट के रूप में घोषित करने की तकनीक से अप्रासंगिक हैं।

— बजे ओवेन मासबैक जूल

जब मैं स्पष्टीकरण पढ़ता हूं तो मुझे अभी भी यह नहीं दिखता कि इससे StyleSheet.create({styles...})बेहतर / तेज कैसे है {styles...}। कोड सिर्फ साफ है, और आप इनलाइनिंग के बजाय नामकरण का भी उपयोग कर रहे हैं। क्या कोई इस पर कुछ प्रकाश डाल सकता है?

— 10

StyleSheetसंकलन पर मान्यता प्रदान करता है

— जीवन टेकर

Downvoted। अपने उत्तर में अप्रासंगिक जानकारी ("रेंडर फंक्शन से दूर जाने की शैली", आदि) न रखें।

— रॉयमुन्सन

नीचा, ओपी का सवाल था StyleSheet.createऔर एक सादे वस्तु के बीच का अंतर था , न कि इनलाइन बनाम कक्षा के बाहर का एक

— अंश

Answer 2

कोई फायदा नहीं हुआ। अवधि।

मिथक 1: StyleSheetअधिक प्रदर्शन करने वाला है

के बीच StyleSheetऔर बाहर घोषित की गई वस्तु के बीच बिल्कुल कोई प्रदर्शन अंतर नहीं है render(यदि आप renderहर बार एक नई वस्तु बना रहे हैं तो यह अलग होगा )। प्रदर्शन अंतर एक मिथक है।

मिथक की उत्पत्ति की संभावना है क्योंकि रिएक्ट नेटिव टीम ने ऐसा करने की कोशिश की, लेकिन वे सफल नहीं थे। आधिकारिक डॉक्स में कहीं भी आपको प्रदर्शन के बारे में कुछ भी नहीं मिलेगा: https://facebook.github.io/react-native/docs/stylesheet.html , जबकि स्रोत कोड "अभी तक लागू नहीं हुआ है": https://github.com/ फेसबुक / प्रतिक्रिया देशी / ब्लॉब / मास्टर / पुस्तकालय / स्टाइलशीट / StyleSheet.js # L207

मिथक 2: StyleSheetसंकलन समय पर शैली वस्तु को मान्य करता है

यह सच नहीं है। सादा जावास्क्रिप्ट संकलन समय पर वस्तुओं को मान्य नहीं कर सकता है।

दो चीज़ें:

• यह रनटाइम पर मान्य करता है, लेकिन ऐसा तब होता है जब आप किसी ऑब्जेक्ट को स्टाइल ऑब्जेक्ट पास करते हैं। कोई फर्क नहीं।
• यदि आप फ्लो या टाइपस्क्रिप्ट का उपयोग कर रहे हैं , तो यह संकलन समय पर मान्य होता है , लेकिन एक बार जब आप ऑब्जेक्ट को एक घटक के लिए शैली प्रोप के रूप में पास करते हैं, या यदि आप नीचे की तरह ठीक प्रकार से ऑब्जेक्ट टाइप करते हैं। कोई अंतर भी नहीं।

const containerStyle: ViewStyle = {
   ...
}

Comments

सच। शायद भ्रम उनके डॉक्स के पुराने संस्करण से आता है जिसका अर्थ है कि वे अंततः आईडी द्वारा संदर्भ शैलियों में जा रहे थे। इसका उल्लेख 0.59 डॉक्स में नहीं है।

— 1947

विघटन के लिए THX। लेकिन सवाल खुला है - किस लिए?

— वासिलि वानचुक

इसके अलावा P2 के बारे में github.com/facebook/react-native/blob/…

— Vasiliy Vanchuk

इस उत्तर के लिए धन्यवाद। यह अधिक

— उत्तोलन का

मेरा परीक्षण इंगित करता है कि यह एक घटक को पारित करने की आवश्यकता के बिना रनटाइम पर मान्य करता है , जैसे StyleSheet.create( {x:{flex: "1"}} )रनटाइम में विफल हो जाएगा, जैसा कि संकलन समय पर इस पर एक टाइपस्क्रिप्ट जांच करेगा।

— ग्लेन लॉरेंस

Answer 3

स्वीकृत उत्तर ओपी प्रश्न का उत्तर नहीं है।

सवाल इनलाइन शैलियों और constवर्ग के बाहर के बीच का अंतर नहीं है , लेकिन हमें StyleSheet.createएक सादे वस्तु के बजाय क्यों उपयोग करना चाहिए ।

मुझे जो कुछ मिला उस पर शोध करने के बाद निम्नलिखित है (यदि आपके पास कोई जानकारी है तो कृपया अद्यतन करें)। StyleSheet.createनिम्नलिखित के विपरीत होने चाहिए:

1. यह शैलियों को मान्य करता है
2. बेहतर perfomances क्योंकि यह एक आईडी के लिए शैलियों की एक मानचित्रण बनाता है, और फिर यह हर बार एक नई वस्तु बनाने के बजाय, इस आईडी के साथ अंदर संदर्भित करता है। इसलिए यहां तक ​​कि उपकरणों को अपडेट करने की प्रक्रिया भी तेज है क्योंकि आप सभी नई वस्तुओं को हर बार नहीं भेजते हैं।

Comments

ये मिथक हैं। मेरा उत्तर जांचें।

— निकोला मिहाजलोवीक

यदि मैं कक्षा के बाहर शैली वस्तु को परिभाषित करता हूं (या यहां तक ​​कि एक वर्ग संपत्ति के रूप में) इसे एक बार (या प्रति बार एक बार) बनाया जाएगा। समान ऑब्जेक्ट्स को फिर से बनाया जा रहा है, केवल फ़ंक्शन के अंदर ही प्रासंगिक है।

— थजे

कांस्टेबल के लिए हाँ, लेकिन क्लास की संपत्ति नहीं है। स्थैतिक वर्ग संपत्ति हां।

— quirimmo

Answer 4

यह विचार किया जाना है कि एक स्टाइल शीट का उपयोग कर अधिक performant था इस्तेमाल किया, और किया गया था की सिफारिश की आर.एन. टीम द्वारा इस कारण संस्करण 0.57 तक के लिए है, लेकिन यह अब नहीं रह सिफारिश की है के रूप में सही ढंग से में बताया एक और जवाब इस सवाल का।

आर एन प्रलेखन अब, निम्नलिखित कारणों के लिए स्टाइल शीट सिफारिश की गई है, हालांकि मुझे लगता है कि इन कारणों सादा वस्तुओं समारोह प्रस्तुत करना के बाहर बनाए गए करने के लिए समान रूप से लागू होता है:

• रेंडर फ़ंक्शन से शैलियों को स्थानांतरित करके, आप कोड को समझना आसान बना रहे हैं।
• रेंडरिंग फ़ंक्शन में शैलियों को नाम देना निम्न स्तर के घटकों में अर्थ जोड़ने का एक अच्छा तरीका है।

तो मैं क्या सोचते हैं कर रहे हैं सादे वस्तुओं से अधिक स्टाइल शीट का उपयोग कर के संभावित लाभ?

1) इसके विपरीत दावों के बावजूद आर एन v0.59.10 पर अपना परीक्षण दर्शाता है कि आप कर जब बुला कुछ मान्यता प्राप्त StyleSheet.create()और टाइपप्रति (और शायद प्रवाह) भी संकलन समय पर त्रुटियों रिपोर्ट करेंगे। यहां तक कि संकलन समय की जाँच मुझे लगता है कि यह अभी भी शैलियों की रन बार मान्यकरण करना लाभदायक होता है बिना पहले वे प्रतिपादन के लिए उपयोग किया जाता है, विशेष रूप से जहां घटक है कि उन शैलियों का उपयोग सशर्त गाया जा सकता है। यह इस तरह की त्रुटियों को सभी प्रतिपादन परिदृश्यों का परीक्षण किए बिना उठाया जा सकेगा।

2) यह देखते हुए कि स्टाइलशीट की आरएन टीम द्वारा सिफारिश की जाती है, उनके पास भविष्य में प्रदर्शन में सुधार करने के लिए स्टाइलशीट का उपयोग करने की उम्मीदें हो सकती हैं, और उदाहरण के लिए उनके मन में अन्य संभावित सुधार भी हो सकते हैं:

3) वर्तमान StyleSheet.create()रन-टाइम सत्यापन उपयोगी है, लेकिन थोड़ा सीमित है। ऐसा लगता है कि यह उस प्रकार की जाँच तक सीमित है, जो आपको प्रवाह या टाइपस्क्रिप्ट के साथ मिलेगा, इसलिए यह कहना flex: "1"या होगा borderStyle: "rubbish", लेकिन ऐसा नहीं width: "rubbish"है कि प्रतिशत स्ट्रिंग हो सकता है। यह संभव है कि RN टीम भविष्य में इस तरह के सत्यापन को प्रतिशत स्ट्रिंग्स, या सीमा सीमाओं जैसी चीज़ों की जाँच करके सुधार सकती है, या आप StyleSheet.create()अपने स्वयं के फ़ंक्शन में लपेट सकते हैं ताकि अधिक व्यापक सत्यापन हो सके।

4) स्टाइलशीट का उपयोग करके आप शायद तीसरे पक्ष के विकल्प / एक्सटेंशन जैसे प्रतिक्रिया-मूल-विस्तारित-स्टाइलशीट के लिए संक्रमण करना आसान बना रहे हैं जो अधिक प्रदान करते हैं।

Answer 5

के माध्यम से अपनी शैलियों का निर्माण StyleSheet.createतभी मान्य होगा जब वैश्विक चर __DEV__सत्य पर सेट हो (या एंड्रॉइड या आईओएस एमुलेटर के अंदर चलने के दौरान रिएक्टिव नेटिव डीईवी और पीआरडी चर देखें )

फ़ंक्शन स्रोत कोड बहुत सरल है:

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

मैं इसका उपयोग करने की सलाह दूंगा क्योंकि यह विकास के दौरान रन-टाइम सत्यापन करता है, साथ ही यह ऑब्जेक्ट को जमा देता है।

Answer 6

StyleSheetटाइपस्क्रिप्ट में सत्यापन को छोड़कर मुझे बीच और सादे ऑब्जेक्ट में कोई अंतर नहीं मिला ।

उदाहरण के लिए, यह (टाइपिंग अंतर पर ध्यान दें):

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

इसके बराबर है:

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