مقارنة سريعة للأداء بين أنماط المكونات والأنماط المضمنة في رد الفعل الأصلي

لقد تساءلت غالبًا عن اختلافات الأداء بين أنماط التصميم والأنماط المضمنة عندما يتعلق الأمر بـ React Native. هنا ، سأقارن بينهما بعدة حالات اختبار. سأستخدم نسختين مختلفتين من المكونات المصممة للاختبار ، أحدهما هو الإصدار الأخير والإصدار الآخر من الفرع الرئيسي (https://github.com/styled-components/styled-components). منذ Max Stoiber ، أبلغني أنهم قاموا ببعض تحسينات الأداء على الماجستير.

تتضمن حالة الاختبار الأولى التي قمت بها عرض ScrollView والذي سيؤدي إلى عرض 10000 عنصر. نحن نستخدم ScrollView بدلاً من ListView نظرًا لأن ListView مُحسّن لمجموعات البيانات الكبيرة ، ولا يتم عرض جميع البيانات مرة واحدة.
بينما يعرض ScrollView جميع مكوناته الفرعية التفاعلية في آن واحد.

لقد قمت بإنشاء شاشتين مختلفتين يحتوي كل منهما على ListView و ScrollView ، مع مكونات فرعية تم إنشاؤها باستخدام مكونات نصية وأنماط مضمنة.

فيما يلي test-screen.js ، هذه هي الشاشة التي تحتوي على أنماط مضمنة. أنه يحتوي على كل من وظائف renderListView & renderScrollView (تبديلها عند الاختبار ، بدلاً من إنشاء شاشة مختلفة)

import React، {Component} from 'react'؛
استيراد {ListView ، ScrollView ، StyleSheet ، View ، Text} من 'react-native' ؛
استيراد testData من './test-data' ؛
أنماط const = StyleSheet.create ({
  الصف: {
    الحشوةأعلى: 5 ،
    الحشوأسفل: 5 ،
    عرض الحدود: 1 ،
    borderBottomColor: 'gray' ،
  }،
  عرض التمرير: {
    المرن: 1 ،
  }،
})؛
الطبقة TestScreen يمتد المكون {
  منشئ (الدعائم) {
    سوبر (الدعائم)؛
    const ds = new ListView.DataSource ({rowHasChanged: (r1، r2) => r1! == r2})؛
    هذا. الدولة = {
      مصدر البيانات: ds.cloneWithRows (testData) ،
    }؛
  }
componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} components`)؛
    console.time ( 'مضمنة')؛
  }
componentDidMount () {
    console.timeEnd ( 'مضمنة')؛
  }
renderRow (row) {
    return   {row.name}  ؛
  }
renderListView () {
    إرجاع (
      
    )؛
  }
renderScrollView () {
    إرجاع (
      
        {testData.map ((صف ، فهرس) => (
          <طريقة العرض = {styles.row} key = {index}> <النص> {row.name}  
        ))}
      
    )؛
  }
يجعل() {
    إرجاع this.renderListView ()؛
  }
}
TestScreen الافتراضي التصدير ؛

فيما يلي test-screen-styled.js ، ويتضمن جميع المكونات حتى ListView و ScrollView التي تم تهيئتها باستخدام مكونات styled.

import React، {Component} from 'react'؛
استيراد {ListView} من "رد فعل أصلي" ؛
استيراد styled من "styled-components / native" ؛
استيراد testData من './test-data' ؛
const صف = styled.View`
  الحشو أعلى: 5 ؛
  الحشو أسفل: 5 ؛
  عرض الحدود السفلية: 1 ؛
  اللون السفلي القاع: رمادي.
`.
const RowText = styled.Text`
`.
const ScrollViewStyled = styled.ScrollView`
  المرن: 1 ؛
`.
const ListViewStyled = styled.ListView`
`.
الفئة TestScreenStyled يمتد المكون {
  منشئ (الدعائم) {
    سوبر (الدعائم)؛
    const ds = new ListView.DataSource ({rowHasChanged: (r1، r2) => r1! == r2})؛
    هذا. الدولة = {
      مصدر البيانات: ds.cloneWithRows (testData) ،
    }؛
  }
  componentWillMount () {
    console.log (`ListView - Rendering $ {testData.length} components`)؛
    console.time ( 'على غرار')؛
  }
componentDidMount () {
    console.timeEnd ( 'على غرار')؛
  }
renderRow (row) {
    return {row.name} ؛
  }
renderListView () {
    إرجاع (
      
    )؛
  }
renderScrollView () {
    إرجاع (
      
        {testData.map ((row، index) =>   {row.name}  )}
      
    )؛
  }
يجعل() {
    إرجاع this.renderListView ()؛
  }
}
تصدير الافتراضي TestScreenStyled؛

نتائج الأداء

أداء الإصدار الحالي من مكونات styled بطريقة أفضل من أحدث إصدار الإصدار. يوجد اختلاف في الأداء يتراوح بين 1-2 ثانية في أحدث إصدار من الإصدار styled vs master في اختبارات ScrollView. لقد اختبرت فقط الوقت الذي استغرقته من componentWillMount إلى componentDidMount ، لعرض المكونات في كل من ListView و ScrollView. عندما يتعلق الأمر بتقديم كمية أصغر من المكونات (1000 وتحت) في ScrollView أو استخدام ListView لتقديم أي قدر من المكونات ، فإن الفرق يكون ضئيلًا بين أنماط التصميم والأنماط المضمنة.

عندما تقوم بتقديم كميات كبيرة من المكونات في قائمة ، فأنت تريد استخدام ListView بدلاً من ScrollView ، لأن ScrollView يقوم بتحميل كل شيء مرة واحدة. لذا لن تستخدم أبدًا ScrollView لتقديم مجموعة كبيرة من المكونات. يعتبر فارق التوقيت بين مكونات العرض في ListView في مكونات نمطية مقابل أنماط مضمنة ، صغيرًا إلى حد ما بالنسبة لجميع مقادير المكونات المختلفة المقدمة. حتى عندما يتعلق الأمر بتقديم كميات كبيرة من المكونات في ScrollView ، فإن الإصدار الأحدث على الرئيسية للمكونات المصممة يقترب إلى حد ما من الأنماط المضمنة.

خاتمة

تقترب المكونات المصممة بشكل أكثر قربًا من سرعة الأنماط المضمّنة. أوصي الجميع بتجربته في مشروعهم ، فمن النادر جدًا أن تقوم بالفعل بتقديم كميات كبيرة من المكونات في ScrollView. يتشابه أداء ListView للمكونات الأنيقة مع أداء الأنماط المضمنة حتى بالنسبة لمجموعات المكونات الكبيرة للغاية. إن مقدار السياق وقابلية القراءة الذي توفره المكونات المصممة للمكونات والشاشات يستحق تكاليف الأداء الصغيرة (إن وجدت) في العديد من الحالات. ليس لدي أدنى شك في أنه مع حدوث تحديثات مستقبلية للمكونات المصممة ، سنبدأ في رؤية فجوة الأداء تصبح أصغر.

الريبو هنا: https://github.com/jm90m/rn-styled-components-performance