השוואה בין ביצועים מהירים של רכיבים מעוצבים לעומת סגנונות מוטבעים בתגובת הילידים

לא פעם תהיתי מה היו הבדלי הביצועים בין רכיבים מעוצבים לסגנונות מוטבעים בכל הקשור ל- React Native. הנה, אני משווה את השניים למספר מקרי בדיקה. אשתמש בשתי גרסאות שונות של רכיבים מעוצבים לבדיקה שלי, גרסה אחת היא המהדורה האחרונה והגירסה השנייה מגיעה מסניף הראשי (https://github.com/styled-components/styled-components). מאז מקס סטויבר, הודיעו לי שהם ביצעו כמה אופטימיזציות ביצועים במאסטר.

מקרה הבדיקה הראשון שיש לי כולל ScrollView שיעבד 10,000 אלמנטים. אנו משתמשים ב- ScrollView ולא ב- ListView מכיוון ש- ListView מותאם למערכות נתונים גדולים, והוא אינו מעניק את כל הנתונים בבת אחת.
בעוד ש- ScrollView מעניק את כל רכיבי הילד המגיבים בו-זמנית.

יצרתי שני מסכים שונים שכל אחד מהם הכיל ListView ו- ScrollView, כאשר רכיבים לילדים נוצרו באמצעות רכיבים מעוצבים וסגנונות מוטבעים.

הנה test-screen.js, זהו המסך שיש בו סגנונות מוטבעים. זה מכיל פונקציות renderListView ו- renderScrollView (החלפתן כשאני בודק, במקום ליצור מסך אחר)

ייבא React, {Component} מ'גיב ';
ייבא {ListView, ScrollView, StyleSheet, View, Text} מ'גיבוי מגיב ';
יבוא testData מ- './test-data';
const styles = StyleSheet.create ({
  שורה: {
    ריפוד למעלה: 5,
    ריפוד תחתון: 5,
    גבול תחתון רוחב: 1,
    borderBottom Color: 'אפור',
  },
  תצוגת גלילה: {
    להגמיש: 1,
  },
});
TestScreen בכיתה מרחיב את הרכיב {
  בנאי (אבזרים) {
    סופר (אבזרים);
    const ds = חדש ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
componentWillMount () {
    console.log (`ListView - הצגת $ {testData.length} רכיבים`);
    console.time ('inline');
  }
componentDidMount () {
    console.timeEnd ('inline');
  }
renderRow (שורה) {
    חזור  <טקסט> {row.name}  ;
  }
renderListView () {
    להחזיר (
      <צפייה ברשימה
        dataSource = {this.state.dataSource}
        renderRow = {this.renderRow}
        enableEmptySections = {true}
      />
    );
  }
renderScrollView () {
    להחזיר (
      
        {testData.map ((שורה, אינדקס) => (
          <תצוגת סגנון = {styles.row} מקש = {index}> <טקסט> {row.name}  
        ))}
      
    );
  }
render () {
    להחזיר את זה. renderListView ();
  }
}
ייצוא TestScreen ברירת מחדל;

להלן test-screened-styled.js, והוא כולל את כל הרכיבים אפילו את ListView ו- ScrollView שהותאמו עם רכיבים מעוצבים.

ייבא React, {Component} מ'גיב ';
ייבא את {ListView} מ- 'תגובת ילידים';
ייבוא ​​מעוצב מ'מרכיבים מעוצבים / ילידים ';
יבוא testData מ- './test-data';
const Row = styled.View`
  ריפוד עליון: 5;
  ריפוד תחתון: 5;
  רוחב גבול-תחתון: 1;
  צבע גבול-תחתון: אפור;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  להגמיש: 1;
`;
const ListViewStyled = styled.ListView`
`;
class TestScreenStyled מרחיב את הרכיב {
  בנאי (אבזרים) {
    סופר (אבזרים);
    const ds = חדש ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      dataSource: ds.cloneWithRows (testData),
    };
  }
  componentWillMount () {
    console.log (`ListView - הצגת $ {testData.length} רכיבים`);
    console.time ('סטייל');
  }
componentDidMount () {
    console.timeEnd ('מעוצב');
  }
renderRow (שורה) {
    החזר {row.name} ;
  }
renderListView () {
    להחזיר (
      
    );
  }
renderScrollView () {
    להחזיר (
      
        {testData.map ((שורה, אינדקס) => <מקש שורה = {אינדקס}> <שורה טקסט> {שורה. שם}  <שורה>)}
      
    );
  }
render () {
    להחזיר את זה. renderListView ();
  }
}
ייצא TestScreenStyled המוגדר כברירת מחדל;

תוצאות ביצועים

הגרסה הנוכחית של רכיבים מעוצבים ביצעה ביצועים טובים יותר מגרסת המהדורה האחרונה. יש הבדל בין 1-2 שניות לביצוע בגירסאות המהדורה העדכניות ביותר של רכיבים מעוצבים לעומת מאסטר במבחני ScrollView. בדקתי רק את הזמן שלקח מ- componentWillMount ל- componentDidMount, לצורך עיבוד רכיבים הן ב- ListView והן ב- ScrollView. כשמדובר בביצוע כמות קטנה יותר של רכיבים (1000 ומטה) בתצוגת ScrollView או שימוש ב- ListView לצורך עיבוד כמות כלשהי של רכיבים, ההבדל זניח בין רכיבים מעוצבים לסגנונות מוטבעים.

כשאתה מציג כמויות גדולות של רכיבים ברשימה, תרצה להשתמש ב- ListView ולא ב- ScrollView, מכיוון ש ScrollView פשוט טוען הכל בבת אחת. כך שלעולם לא תשתמשו באמת ב- ScrollView בכדי לעבד סט גדול של רכיבים. הפרש הזמן בין עיבוד רכיבים ב- ListView במרכיבים מעוצבים לעומת סגנונות מוטבעים, הוא די קטן לכל הכמויות השונות של הרכיבים שניתנו. אפילו כשמדובר ביצירת כמויות גדולות של רכיבים ב- ScrollView, הגרסה האחרונה של המאסטר לרכיבים מעוצבים מתקרבת למדי לסגנונות מוטבעים.

סיכום

רכיבים מעוצבים מתקרבים להיות יותר מהירים כמו סגנונות מוטבעים. אני ממליץ לכולם לנסות את הפרויקט שלהם, זה די נדיר אם בכלל תציג כמויות גדולות של רכיבים ב- ScrollView. ביצועי ListView עבור רכיבים מעוצבים זהים כמעט לביצועים של סגנונות מוטבעים אפילו עבור מערכות רכיבים גדולות במיוחד. כמות ההקשר והקלות שמספקים רכיבים מעוצבים לרכיבים ולמסכים שלך שווה בהחלט את עלויות הביצועים הקטנות (אם בכלל) במקרים רבים. אין לי ספק במוחי כאשר מתרחשים עדכונים עתידיים לרכיבים מעוצבים, נתחיל לראות את פער הביצועים הולך וקטן עוד יותר.

ריפו נמצא כאן: https://github.com/jm90m/rn-styled-components-performance