Նորաձևության բաղադրիչների և կատարյալ բաղադրիչների արագ կատարման համեմատություն իրական բնիկների մեջ

Ես հաճախ մտածել եմ, թե որոնք են կատարման տարբերությունները ոճավորված բաղադրիչների և ներսային ոճերի միջև, երբ խոսքը վերաբերում է React Native- ին: Այստեղ ես երկուսը համեմատելու եմ մի քանի փորձարկման դեպքերի հետ: Ես իմ թեստի համար կօգտագործեմ ոճավորված բաղադրիչների 2 տարբեր տարբերակներ, որոնցից մեկը `վերջին թողարկումը, իսկ մյուս տարբերակը` վարպետ մասնաճյուղից (https://github.com/styled-compectors/styled-component): Քանի որ Մաքս Ստոյբերը ինձ տեղեկացրել էր, որ իրենք վարպետի վերաբերյալ կատարել են որոշակի կատարողականներ:

Իմ առաջին փորձարկման գործը ներառում է ScrollView- ը, որը կտա 10,000 տարր: Մենք օգտագործում ենք ScrollView- ը, այլ ոչ թե ListView, քանի որ ListView- ը օպտիմիզացված է տվյալների մեծ հավաքածուների համար, և դա չի տալիս բոլոր տվյալները միանգամից:
Մինչ ScrollView- ը միանգամից տալիս է իր բոլոր արձագանքող մանկական բաղադրիչները:

Ես ստեղծեցի 2 տարբեր էկրան, որոնցից յուրաքանչյուրում տեղակայված էր ListView և ScrollView ՝ երեխաների բաղադրիչներով, որոնք ստեղծվել են ոճավորված բաղադրիչների և ներկառուցված ոճերի միջոցով:

Ահա test-screen.js- ն ՝ սա է էկրանը, որն ունի ներկառուցված ոճեր: Այն պարունակում է ինչպես renderListView & renderScrollView գործառույթներ (դրանք փորձարկելիս փոխանակեք, այլ ոչ թե ստեղծելու այլ էկրան)

ներմուծման React, onent Բաղադրիչ} «ռեակցիաներից»;
ներմուծել {ListView, ScrollView, StyleSheet, View, Text} «ռեակտիվ բնիկից»;
ներմուծել testData ՝ «./test-data» - ից;
const ոճերը = StyleSheet.create ({
  տող. {
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomWidth: 1,
    borderBottomColor: 'մոխրագույն',
  ,
  scrollView:
    flex: 1,
  ,
});
դասի TestScreen- ն ընդլայնում է Բաղադրիչը
  կոնստրուկտոր (առաջարկներ) {
    գերծանրքաշային (props);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state =
      dataSource: ds.cloneWithRows (testData),
    ;
  }
բաղադրիչWillMount ()
    console.log (`ListView - Rendering $ {testData.l length} բաղադրիչները`);
    console.time ('inline');
  }
բաղադրիչDidMount ()
    console.timeEnd ('inline');
  }
renderRow (տող)
    վերադարձնել   {row.name  ;
  }
renderListView ()
    վերադարձ (
      
    );
  }
renderScrollView ()
    վերադարձ (
      
        testData.map ((տող, ինդեքս) => (
          <Դիտել ոճը = {styles.row} ստեղն = {ինդեքս}>  {row.name}  
        ))}
      
    );
  }
մատուցել ()
    վերադարձնել այս.renderListView ();
  }
}
արտահանման լռելյայն TestScreen;

Ահա փորձարկման էկրանի ոճավորումը .js, և այն ներառում է բոլոր բաղադրիչները նույնիսկ ListView- ը և ScrollView- ը նախաստորագրված ոճավորված բաղադրիչներով:

ներմուծման React, onent Բաղադրիչ} «ռեակցիաներից»;
ներմուծել {ListView '«ռեակտիվ բնիկից»;
ներմուծումը `ոճավորված բաղադրիչներից / բնիկից;
ներմուծել testData ՝ «./test-data» - ից;
const Row = ոճավոր: Տես
  բարձիկ-վերին մաս `5;
  լիցք-հատակը `5;
  սահման-ներքև-լայնություն ՝ 1;
  սահման-ներքևի գույնը `մոխրագույն;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = styled.ScrollView`
  ֆլեքս ՝ 1;
`;
const ListViewStyled = styled.ListView`
`;
դասի TestScreenStyled- ն ընդլայնում է Բաղադրիչը
  կոնստրուկտոր (առաջարկներ) {
    գերծանրքաշային (props);
    const ds = new ListView.DataSource ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state =
      dataSource: ds.cloneWithRows (testData),
    ;
  }
  բաղադրիչWillMount ()
    console.log (`ListView - Rendering $ {testData.l length} բաղադրիչները`);
    console.time ('' ոճավորված ');
  }
բաղադրիչDidMount ()
    console.timeEnd ('ոճավորված');
  }
renderRow (տող)
    վերադարձ {row.name} ;
  }
renderListView ()
    վերադարձ (
      
    );
  }
renderScrollView ()
    վերադարձ (
      
        {testData.map ((տող, ինդեքս) => <Տողի բանալին = {ինդեքս}>  {row.name}  )}
      
    );
  }
մատուցել ()
    վերադարձնել այս.renderListView ();
  }
}
արտահանման լռելյայն TestScreenStyled;

Կատարման արդյունքները

Ստիլացված բաղադրիչների ներկայիս տարբերակը ավելի լավ է կատարվել, քան թողարկման վերջին տարբերակը: ScrollView թեստերում ոճավորված բաղադրիչների վերջին թողարկման վարկածի և վարպետի նկատմամբ կատարվածի մոտ 1-2 վայրկյան կատարման տարբերություն կա: Ես փորձարկել եմ միայն բաղադրիչից ՝ WillMount- ից բաղադրիչDidMount- ին տևած ժամանակը, որը բաղկացած է բաղադրիչներից ՝ ListView- ից և ScrollView- ից: Երբ խոսքը գնում է ScrollView- ի ավելի փոքր քանակության բաղադրիչների (1000 և ցածր) մատուցման մասին կամ օգտագործելու ListView- ը `որոշ քանակի բաղադրիչներ մատուցելու համար, ապա տարբերությունն աննշան է ոճավորված բաղադրիչների և ներսային ոճերի միջև:

Երբ մեծ թվով բաղադրիչներ եք ցուցակագրում, կցանկանաք օգտագործել ListView, այլ ոչ թե ScrollView, քանի որ ScrollView- ը պարզապես բեռնում է ամեն ինչ միանգամից: Այսպիսով, դուք երբեք չէիք օգտագործի ScrollView- ը `բաղադրիչների մեծ շարք մատուցելու համար: ListView- ում ոճավորված բաղադրիչների և ներածական ոճերի մեջ ListView- ի բաղադրիչների մատուցման միջև եղած ժամանակային տարբերությունը բավականին փոքր է մատուցվող բաղադրիչների բոլոր տարբեր քանակությունների համար: Նույնիսկ երբ խոսքը վերաբերում է ScrollView- ում մեծ քանակությամբ բաղադրիչների մատուցմանը, ոճավորված բաղադրիչների համար վարպետի վերջին տարբերակը բավականին մոտ է ներածման ոճերին:

Եզրակացություն

Նորաձևության բաղադրիչները մոտենում են ավելի ու ավելի մոտենալուն, որքան արագ, ինչպես ներսից ոճերը: Բոլորին խորհուրդ եմ տալիս փորձել իրենց նախագծում, հազվադեպ է, որ երբևէ իրականում մեծ քանակությամբ բաղադրիչներ պատրաստեք ScrollView- ում: Ձևավորված բաղադրիչների համար ListView կատարումը գրեթե նույնն է ներածական ոճերի կատարման համար, նույնիսկ չափազանց մեծ բաղադրիչի համար: Համապատասխանության և ընթերցանության քանակությունը, որն ապահովում է ոճային բաղադրիչները ձեր բաղադրիչներին և էկրաններին, լավ է, որ արժանի է շատ կատարողականի փոքր ծախսերի (առկայության դեպքում) շատ դեպքերում: Մտքումս կասկած չունեմ, քանի որ ստիլային բաղադրիչների ապագա թարմացումները պատահում են, մենք կսկսենք տեսնել, որ կատարողականի բացը ավելի փոքր է դառնում:

Repo- ն այստեղ է ՝ https://github.com/jm90m/rn-styled-component-performance