ردعمل آبائی میں انائل اسٹائل بمقابلہ اسٹائلڈ اجزاء کی ایک فوری کارکردگی کا موازنہ

میں نے اکثر سوچا ہے کہ جب اس پر عمل آوری کی بات آتی ہے تو اسٹائلڈ اجزاء اور ان لائن اسٹائل کے مابین کارکردگی میں کیا فرق تھا۔ یہاں ، میں ان دونوں کا موازنہ کئی ٹیسٹ کیسز کے ساتھ کروں گا۔ میں اپنے ٹیسٹ کے لئے اسٹائلڈ اجزاء کے 2 مختلف ورژن استعمال کروں گا ، ایک ورژن تازہ ترین ریلیز ہے اور دوسرا ورژن ماسٹر برانچ (https://github.com/styled-components/styled-comp اجزاء) سے آتا ہے۔ چونکہ میکس اسٹائوبر نے ، مجھے مطلع کیا تھا کہ انہوں نے ماسٹر پر کارکردگی کی کچھ اصلاح کی ہے۔

میرے پاس پہلے ٹیسٹ کیس میں ایک اسکرول ویو شامل ہے جو 10،000 عناصر کو پیش کرے گا۔ ہم لسٹ ویو کے بجائے اسکرول ویو کا استعمال کرتے ہیں چونکہ لسٹ ویو بڑے اعداد و شمار کے سیٹوں کے ل optim آپٹمائزڈ ہے ، اور یہ ایک ساتھ تمام ڈیٹا کو رینڈر نہیں کرتا ہے۔
جبکہ سکرول ویو اپنے تمام رد عمل والے بچوں کے اجزا ایک ساتھ پیش کرتا ہے۔

میں نے 2 مختلف اسکرینیں تخلیق کیں جن میں سے ہر ایک نے ایک اسٹائلڈ اجزاء اور ان لائن شیلیوں کا استعمال کرکے بچوں کے اجزاء کے ساتھ لسٹ ویو اور اسکرول ویو رکھا تھا۔

یہاں پر اسکرین اسکرین.js ہے ، یہ وہ اسکرین ہے جس میں ان لائن اسٹائل ہیں۔ اس میں رینڈر لسٹ ویو اور رینڈر اسکرول ویو دونوں افعال شامل ہیں (جب میں جانچ کرتا ہوں تو ان کو تبدیل کرکے ، مختلف اسکرین بنانے کی بجائے)

درآمد کریں ، 'رد عمل' سے onent اجزاء؛
درآمد کریں {لسٹ ویو ، اسکرول ویو ، اسٹائل شیٹ ، ویو ، ٹیکسٹ 'سے' رد عمل-آبائی '؛
'./test-data' سے ٹیسٹ ڈیٹا درآمد کریں؛
ڈھانچے کی طرزیں = اسٹائل شیٹ.کریٹی ({
  قطار:
    پیڈنگ ٹاپ: 5 ،
    پیڈنگ نیچے: 5 ،
    سرحد کے نیچے چوڑائی: 1 ،
    سرحد کے نیچے کا رنگ: 'گرے' ،
  } ،
  اسکرول ویو: {
    فلیکس: 1،
  } ،
})؛
کلاس ٹیسٹ اسکرین کے حص extendے میں توسیع {
  تعمیر کنندہ (سہارے))
    سپر (سہارے)؛
    کونٹ ڈی ایس = نیا لسٹ ویو.ڈاٹا سورس ({صف ہاس چینجڈ: (r1، r2) => r1! == r2})؛
    اس.اسٹیٹ = {
      ڈیٹا سورس: ds.cloneWithRows (ٹیسٹ ڈیٹا) ،
    }؛
  }
اجزاءوِل ماؤنٹ () {
    کنسول.لاگ (`لسٹ ویو - رینڈرنگ {{testData.length} اجزاء`)؛
    کنسول.ٹائم ('ان لائن')؛
  }
اجزاء کی قیمت ())
    کنسول.ٹائم ایینڈ ('ان لائن')؛
  }
رینڈر (قطار) {
    واپسی <دیکھیں انداز = {انداز "
  }
رینڈر لسٹ ویو () {
    واپس (
      <لسٹ ویو
        ڈیٹا سورس = {this.state.dataSource}
        renderRow = {this.reenderRow}
        قابل ایمپسیکشن = {سچ}
      />
    )؛
  }
رینڈر سکرول ویو () {
    واپس (
      <اسکرول ویو اسٹائل = {اسٹائل.اسکرول ویو}>
        {testData.map ((قطار ، انڈیکس) => (
          <طرز دیکھیں {= طرزیں۔رو} کی = = {انڈیکس}> <متن> {صف. نام}  >
        ))}
      
    )؛
  }
رینڈر () nder
    اس کو واپس کریں۔ رینڈر لسٹ ویو ()؛
  }
}
پہلے سے طے شدہ اسکرین اسکرین برآمد کریں۔

یہاں پر ٹیسٹ اسکرین اسٹائل شدہ js ہے ، اور اس میں اسٹائل شدہ اجزاء کے ساتھ شروع کردہ لسٹ ویو اور اسکرول ویو کے تمام اجزاء شامل ہیں۔

درآمد کریں ، 'رد عمل' سے onent اجزاء؛
'رد عمل-آبائی' سے 'لسٹ ویو' درآمد کریں؛
'اسٹائل والے اجزاء / مقامی' سے اسٹائلڈ درآمد کریں۔
'./test-data' سے ٹیسٹ ڈیٹا درآمد کریں؛
رکاوٹ قطار = اسٹائلڈ.ویو`
  بھرتی اوپر: 5؛
  بھرتی نیچے: 5؛
  سرحد کے نیچے کی چوڑائی: 1؛
  سرحد کے نیچے رنگ: گرے؛
`؛
const RowText = اسٹائلڈ۔ ٹیکسٹ`
`؛
کونٹ اسکرول ویو اسٹائلڈ = اسٹائلڈ۔ سکرول ویو `
  فلیکس: 1؛
`؛
سینٹ لسٹ ویو اسٹائل = اسٹائلڈ۔ لسٹ وییو`
`؛
کلاس ٹیسٹ اسکرین اسٹائلڈ حص Compے کو بڑھاتا ہے {
  تعمیر کنندہ (سہارے))
    سپر (پرپس)؛
    کونٹ ڈی ایس = نیا لسٹ ویو.ڈاٹا سورس ({صف ہاس چینجڈ: (r1، r2) => r1! == r2})؛
    اس.اسٹیٹ = {
      ڈیٹا سورس: ds.cloneWithRows (ٹیسٹ ڈیٹا) ،
    }؛
  }
  اجزاءوِل ماؤنٹ () {
    کنسول.لوگ (`لسٹ ویو - رینڈرنگ {{testData.length} اجزاء`)؛
    کنسول ڈاٹ ٹائم ('اسٹائلڈ')؛
  }
اجزاء کی قیمت ())
    کنسول.ٹائم ایینڈ ('اسٹائلڈ')؛
  }
رینڈر (قطار) {
    واپسی <رو> << روٹ ٹیکسٹ >{رو. نیم} << روow ٹیکسٹ> ؛
  }
رینڈر لسٹ ویو () {
    واپس (
      <لسٹ ویو اسٹائلڈ
        ڈیٹا سورس = {this.state.dataSource}
        renderRow = {this.reenderRow}
        قابل ایمپسیکشن = {سچ}
      />
    )؛
  }
رینڈر سکرول ویو () {
    واپس (
      <سکرول ویو اسٹائل>
        {testData.map ((صف ، اشاریہ) => <قطار کی چابی = {انڈیکس}> <روٹ ٹیکسٹ> {قطار. نام}  )}
      
    )؛
  }
رینڈر () nder
    اس کو واپس کریں۔ رینڈر لسٹ ویو ()؛
  }
}
پہلے سے طے شدہ ٹیسٹ اسکرین اسٹائلڈ برآمد کریں۔

کارکردگی کے نتائج

اسٹائلڈ اجزاء کے حالیہ ورژن نے تازہ ترین ریلیز ورژن سے بہتر کارکردگی کا مظاہرہ کیا۔ اسکرول ویو ٹیسٹ میں اسٹائل والے اجزاء کے تازہ ترین ریلیز ورژن بمقابلہ ماسٹر میں تقریبا– 1–2 سیکنڈ کارکردگی کا فرق ہے۔ میں نے صرف فہرست وقت اور اسکرول ویو ، دونوں میں اجزاء پیش کرنے کے لئے ، اجزاویلماؤنٹ سے لے کرکمپٹنڈڈماؤنٹ میں لے جانے والے وقت کا تجربہ کیا۔ جب بات اسکرول ویو میں اجزاء کی چھوٹی مقدار (1000 اور اس سے کم) پیش کرنے یا کسی بھی طرح کے اجزاء کو پیش کرنے کے لئے لسٹ ویو کا استعمال کرنے کی ہو تو ، اسٹائل والے اجزاء اور ان لائن اسٹائل کے درمیان فرق نہ ہونے کے برابر ہے۔

جب آپ کسی فہرست میں بڑے پیمانے پر اجزاء پیش کررہے ہیں تو ، آپ اسکرول ویو کی بجائے لسٹ ویو کو استعمال کرنا چاہتے ہیں ، کیونکہ اسکرول ویو صرف ایک ہی وقت میں ہر چیز کو لوڈ کر دیتا ہے۔ لہذا آپ اجزاء کا ایک بڑا سیٹ پیش کرنے کے لئے کبھی بھی واقعی اسکرول ویو کا استعمال نہیں کریں گے۔ اسٹائلڈ اجزاء کے مقابلے میں ان لائن شیلیوں میں لسٹ ویو میں اجزاء کی انجام دہی کے مابین وقت کا فرق ، مختلف اجزاء کے مہیا کیے جانے والے اجزاء کے لئے کافی کم ہے۔ یہاں تک کہ جب اسکرول ویو میں بڑے پیمانے پر اجزاء کی پیش کش کی بات آتی ہے تو ، اسٹائل والے اجزاء کے لئے ماسٹر کا تازہ ترین ورژن ان لائن اسٹائل کے بالکل قریب آتا ہے۔

نتیجہ اخذ کرنا

اسٹائلڈ اجزاء ان لائن شیلیوں کی طرح تیز تر ہونے کے قریب اور قریب آرہے ہیں۔ میں سب کو مشورہ دیتا ہوں کہ وہ اپنے پروجیکٹ میں اس کو آزمائیں ، یہ بہت کم ہوتا ہے کہ اگر واقعی آپ اسکرول ویو میں بڑی تعداد میں اجزاء پیش کریں گے۔ اسٹائلڈ اجزاء کیلئے لسٹ ویو کی کارکردگی ان لائن اسٹائل کی کارکردگی سے بالکل یکساں ہے حتی کہ انتہائی بڑے اجزاء سیٹوں کے لئے بھی۔ سیاق و سباق اور پڑھنے کے قابل ہونے کی مقدار جو اسٹائلڈ اجزاء آپ کے اجزاء اور اسکرینوں کو مہیا کرتے ہیں وہ بہت ساری صورتوں میں چھوٹی کارکردگی کے اخراجات (اگر کوئی ہے) کے قابل ہے۔ میرے ذہن میں کوئی شک نہیں ہے کیونکہ اسٹائل والے اجزاء کے بارے میں آئندہ اپ ڈیٹ ہوتا ہے ، ہم کارکردگی کا فرق اور بھی چھوٹے ہوتے دیکھنا شروع کردیں گے۔

ریپو یہاں ہے: https://github.com/jm90m/rn-styled-components-performance