নেটিভ প্রতিক্রিয়া - স্টাইলশিট বনাম একটি সরল বস্তু ব্যবহার করে কী লাভ?

Question 1

What exactly is the benefit of using StyleSheet.create() vs a plain object?

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

Vs.

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

Question 2

Quoting directly from comment section of StyleSheet.js of React native

Code quality:

By moving styles away from the render function, you're making the code easier to understand.

Naming the styles is a good way to add meaning to the low level components in the render function.

Performance:

Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.

It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

Also StyleSheet validates your stylesheet content as well. So any error of incorrect style property is shown at time of compiling rather than at runtime when StyleSheet is actually implemented.

Question 3

There is no benefit. Period.

Myth 1: `StyleSheet` is more performant

There is absolutely no performance difference between StyleSheet and an object declared outside of render (it would be different if you're creating a new object inside render every time). The performance difference is a myth.

পৌরাণিক কাহিনীর মূল কারণ সম্ভবত প্রতিক্রিয়া নেটিভ টিম এটি করার চেষ্টা করেছিল, কিন্তু তারা সফল হয়নি। অফিসিয়াল ডক্সে কোথাও আপনি কর্মক্ষমতা সম্পর্কে কিছু পাবেন না: https://facebook.github.io/react-native/docs/stylesheet.html , তবে উত্স কোডটি "এখনও প্রয়োগ করা হয়নি": https://github.com/ ফেসবুক / প্রতিক্রিয়া নেটিভ / ব্লব / মাস্টার / লাইব্রেরি / স্টাইলশীট / স্টাইলশিট.জেএস # এল207

মিথ 2: `StyleSheet` সংকলন সময়ে স্টাইল অবজেক্টকে বৈধতা দেয়

এটা সত্য নয়। সমতল জাভাস্ক্রিপ্ট সংকলনের সময় অবজেক্টগুলিকে বৈধতা দিতে পারে না।

দুটি জিনিস:

এটি রানটাইমে বৈধতা দেয়, তবে শৈলীর বস্তুটি কোনও উপাদানকে পাস করার সময় এটি হয় does কোনও পার্থক্য নেই।
আপনি প্রবাহ বা টাইপসক্রিপ্ট ব্যবহার করছেন যদি এটি সংকলন সময়ে বৈধ হয় না , তবে আপনি একবার উপাদানটির স্টাইল প্রোপ হিসাবে বস্তুটি পাস করার পরে বা আপনি সঠিকভাবে নীচের মতো কোনও জিনিস টাইপ করেন। কোন পার্থক্য।

const containerStyle: ViewStyle = {
   ...
}

Question 4

গৃহীত উত্তরটি ওপি প্রশ্নের উত্তর নয়।

প্রশ্নটি ইনলাইন শৈলী এবং constশ্রেণীর বাইরের মধ্যে পার্থক্য নয় , তবে কেন আমাদের ব্যবহার করা উচিতStyleSheet.create instead of a plain object.

আমি যা কিছু পেয়েছি তার গবেষণা করার পরে নিম্নলিখিতটি (দয়া করে আপনার কোনও তথ্য থাকলে আপডেট করুন)। এর অগ্রগতি StyleSheet.createনিম্নলিখিত হতে হবে:

এটি শৈলীর বৈধতা দেয়
Better perfomances because it creates a mapping of the styles to an ID, and then it refers inside with this ID, instead of creating every time a new object. So even the process of updating devices is faster because you don't send everytime all the new objects.

Question 5

এটি বিবেচনা করা হত যে স্টাইলশিট ব্যবহার করা আরও পারফরম্যান্ট ছিল এবং আরএন টিম এটি 0.57 সংস্করণ পর্যন্ত আপ করার জন্য সুপারিশ করেছিল, কিন্তু এখন আর কোনও উত্তরে সঠিকভাবে নির্দেশিত হিসাবে এটি আর সুপারিশ করা হয়নি team এই প্রশ্নের।

আরএন ডকুমেন্টেশন এখন নিম্নলিখিত কারণের জন্য স্টাইলশিট বিশেষ পরামর্শ দেওয়া হচ্ছে যদিও আমি মনে করি এসব কারণেই প্লেইন বস্তু ফাংশন রেন্ডার বাইরে তৈরি করা হয় যে ক্ষেত্রে সমানভাবে প্রযোজ্য হবে:

শৈলীগুলি রেন্ডার ফাংশন থেকে দূরে সরিয়ে আপনি কোডটি বুঝতে সহজ করে তুলছেন।
শৈলীর নামকরণ রেন্ডার ফাংশনে নিম্ন স্তরের উপাদানগুলিকে অর্থ যুক্ত করার একটি ভাল উপায়।

তাই আমি কি মনে করেন হয় প্লেইন বস্তু উপর স্টাইলশিট ব্যবহারের মাধ্যমে সম্ভাব্য সুবিধা?

1) বিপরীত দাবী সত্ত্বেও আরএন v0.59.10 আমার পরীক্ষামূলক ইঙ্গিত করছে যে না যখন কলিং কিছু বৈধতা পেতে StyleSheet.create()এবং টাইপ করা বিষয় (এবং সম্ভবত প্রবাহিত) ও কম্পাইল সময়ে ত্রুটি প্রতিবেদন করবে। সংকলন সময় পরীক্ষা না করেও আমি মনে করি এর আগে শৈলীর রানটাইম বৈধতা কার্যকর করা এখনও উপকারী beneficial রেন্ডারিংয়ের ব্যবহারের , বিশেষত যেখানে where শৈলীগুলি ব্যবহার করে এমন উপাদানগুলি শর্তসাপেক্ষে রেন্ডার হতে পারে। এটি সমস্ত রেন্ডারিং পরিস্থিতি পরীক্ষা না করেই এই জাতীয় ত্রুটিগুলি বাছাইয়ের অনুমতি দেবে।

2) প্রদত্ত যে স্টাইলশীট হয় তারা এখনও স্টাইলশিট ব্যবহারের মাধ্যমে ভবিষ্যতে পারফরম্যান্সের উন্নতি করতে আশা থাকতে পারে আরএন দলের দ্বারা বাঞ্ছনীয়, এবং তারা পাশাপাশি মনের মধ্যে অন্যান্য সম্ভাব্য উন্নতি, উদাহরণস্বরূপ থাকতে পারে:

3) বর্তমান StyleSheet.create()রান-টাইম বৈধতা কার্যকর তবে কিছুটা সীমাবদ্ধ। এটি প্রবাহ বা টাইপস্ক্রিপ্টের সাথে আপনি যে প্রকারের পরীক্ষা নেবেন তা সীমাবদ্ধ বলে মনে হচ্ছে, তাই বলুন flex: "1"বা বেছে নিন borderStyle: "rubbish"তবে width: "rubbish"এটি শতাংশের স্ট্রিং হতে পারে। এটা সম্ভব যে আরএন টিম ভবিষ্যতে শতাংশের স্ট্রিং, বা রেঞ্জ সীমা ইত্যাদির মতো জিনিসগুলি পরীক্ষা করে যেমন বৈধতা উন্নত করতে পারে বা আপনি মোড়ানো করতে পারেনStyleSheet.create() আরও বিস্তৃত বৈধতা দেওয়ার জন্য আপনি নিজের ফাংশনে গুটিয়ে রাখতে পারেন।

৪) স্টাইলশিট ব্যবহার করে আপনি সম্ভবত তৃতীয় পক্ষের বিকল্পগুলি / এক্সটেনশানগুলিতে আরও বেশি প্রস্তাব দেয় এমন রিট্যাক্ট-নেটিভ-এক্সটেন্ডেড-স্টাইলশিটের মতো স্থানান্তরকে সহজ করে তুলছেন ।

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

Question 7

এর মাধ্যমে আপনার স্টাইলগুলি তৈরি করা 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;
}

আমি এটি ব্যবহার করার পরামর্শ দেব কারণ এটি বিকাশের সময় রান-টাইম বৈধতা সম্পাদন করে, এটি বস্তুকেও হিমশীতল করে দেয়।

নেটিভ প্রতিক্রিয়া - স্টাইলশিট বনাম একটি সরল বস্তু ব্যবহার করে কী লাভ?

Myth 1: StyleSheet is more performant

মিথ 2: StyleSheet সংকলন সময়ে স্টাইল অবজেক্টকে বৈধতা দেয়

Myth 1: `StyleSheet` is more performant

মিথ 2: `StyleSheet` সংকলন সময়ে স্টাইল অবজেক্টকে বৈধতা দেয়