ການປຽບທຽບການປະຕິບັດຢ່າງວ່ອງໄວຂອງສ່ວນປະກອບທີ່ມີຄໍເຕົ້າໄຂ່ແລະແບບ Inline Styles ໃນ React native

ຂ້ອຍມັກຈະສົງໄສວ່າຄວາມແຕກຕ່າງຂອງການປະຕິບັດແມ່ນຫຍັງລະຫວ່າງອົງປະກອບທີ່ມີຮູບແບບແລະຮູບແບບເສັ້ນໃນເວລາທີ່ມັນເວົ້າກັບ React Native. ນີ້, ຂ້ອຍຈະປຽບທຽບສອງຢ່າງນີ້ກັບຫລາຍໆກໍລະນີທົດສອບ. ຂ້ອຍຈະໃຊ້ 2 ສ່ວນປະກອບທີ່ແຕກຕ່າງກັນຂອງສ່ວນປະກອບທີ່ມີຮູບແບບ ສຳ ລັບການທົດສອບຂອງຂ້ອຍ, ລຸ້ນ ໜຶ່ງ ແມ່ນລຸ້ນທີ່ລ້າສຸດແລະລຸ້ນອື່ນແມ່ນມາຈາກສາຂາຕົ້ນສະບັບ (https://github.com/styled-components/styled-components). ນັບຕັ້ງແຕ່ Max Stoiber, ໄດ້ແຈ້ງໃຫ້ຂ້ອຍຮູ້ວ່າພວກເຂົາໄດ້ເຮັດການເພີ່ມປະສິດທິພາບບາງຢ່າງກ່ຽວກັບແມ່ບົດ.

ກໍລະນີທົດສອບ ທຳ ອິດຂ້ອຍມີ ScrollView ເຊິ່ງຈະເຮັດໃຫ້ມີ 10,000 ອົງປະກອບ. ພວກເຮົາໃຊ້ ScrollView ຫຼາຍກວ່າ ListView ນັບຕັ້ງແຕ່ ListView ຖືກປັບປຸງໃຫ້ດີຂື້ນ ສຳ ລັບຊຸດຂໍ້ມູນໃຫຍ່ແລະມັນບໍ່ໄດ້ສະແດງຂໍ້ມູນທັງ ໝົດ ໃນເວລາດຽວກັນ.
ໃນຂະນະທີ່ ScrollView ອອກສ່ວນປະກອບເດັກທີ່ມີປະຕິກິລິຍາທັງ ໝົດ ໃນເວລາດຽວກັນ.

ຂ້ອຍໄດ້ສ້າງ 2 ໜ້າ ຈໍທີ່ແຕກຕ່າງກັນເຊິ່ງແຕ່ລະຫ້ອງມີ ListView ແລະ ScrollView, ໂດຍມີສ່ວນປະກອບຂອງເດັກທີ່ຖືກສ້າງຂື້ນໂດຍໃຊ້ສ່ວນປະກອບແລະສ່ວນປະກອບໃນຮູບແບບ.

ນີ້ແມ່ນ test-screen.js, ນີ້ແມ່ນ ໜ້າ ຈໍທີ່ມີຮູບແບບພາຍໃນ. ມັນມີທັງ ໜ້າ ທີ່ renderListView & renderScrollView (ປ່ຽນພວກມັນອອກເມື່ອຂ້ອຍທົດສອບ, ແທນທີ່ຈະສ້າງ ໜ້າ ຈໍອື່ນ)

import React, {ສ່ວນປະກອບ} ຈາກ 'react';
ນຳ ເຂົ້າ {ລາຍຊື່ ViewView, ScrollView, StyleSheet, View, Text} ຈາກ 'react-native';
ນຳ ເຂົ້າ testData ຈາກ './test-data';
ຄໍເຕົ້າໄຂ່ທີ່ const = StyleSheet.create ({
  ແຖວ: {
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomWidth: 1, ທ.
    borderBottomColor: 'ສີຂີ້ເຖົ່າ',
  },,
  scrollView: {
    ຍືດຫຍຸ່ນ: 1,
  },,
});
ຫ້ອງຮຽນ TestScreen ຂະຫຍາຍອົງປະກອບ {
  ຜູ້ສ້າງ (props) {
    super (props);
    const ds = ListView.DataSource ໃໝ່ ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      ແຫລ່ງຂໍ້ມູນ: ds.cloneWithRows (testData),
    };
  }
ສ່ວນປະກອບWillMount () {
    console.log (`ListView - ການສະ ໜອງ $ {testData.length} components`);
    console.time ('ເສັ້ນໃນ');
  }
componentDidMount () {
    console.timeEnd ('ເສັ້ນໃນ');
  }
renderRow (ແຖວ) {
    ກັບມາ <ເບິ່ງຮູບແບບ = {styles.row}> <ບົດຄວາມ> {row.name}  ;
  }
renderListView () {
    ກັບມາ (
      <ລາຍການເບິ່ງ
        dataSource = {this.state.dataSource}
        renderRow = {this.renderRow}
        enableEmptySections = {ຄວາມຈິງ}
      />
    );
  }
renderScrollView () {
    ກັບມາ (
      <ແບບເລື່ອນຮູບແບບ = {styles.scrollView}>
        {testData.map ((ແຖວ, ດັດສະນີ) => (
          <ເບິ່ງແບບ = {styles.row} key = {index}> <ບົດຄວາມ <{ແຖວ ໜ້າ ຊື່}  
        ))}
      
    );
  }
render () {
    ກັບຄືນ this.renderListView ();
  }
}
ສົ່ງອອກຄ່າເລີ່ມຕົ້ນ TestScreen;

ນີ້ແມ່ນ test-screen-styled.js, ແລະມັນລວມມີສ່ວນປະກອບທັງ ໝົດ ເຖິງແມ່ນວ່າ ListView ແລະ ScrollView ເລີ່ມຕົ້ນດ້ວຍສ່ວນປະກອບຕ່າງໆ.

import React, {ສ່ວນປະກອບ} ຈາກ 'react';
ນຳ ເຂົ້າ {ListView} ຈາກ 'react-native';
ການ ນຳ ເຂົ້າແບບຈາກ 'ຄໍເຕົ້າໄຂ່ທີ່ - ສ່ວນປະກອບ / ພື້ນເມືອງ';
ນຳ ເຂົ້າ testData ຈາກ './test-data';
const ແຖວ: styled.View`
  padding-top: 5;
  padding-bottom: 5;
  border-bottom-width: 1;
  border-bottom-color: ສີຂີ້ເຖົ່າ;
`;
const RowText = styled.Text`
`;
const ScrollViewStyled = ຄໍເຕົ້າໄຂ່ທີ່.ScrollView`
  ຍືດຫຍຸ່ນ: 1;
`;
const ListViewStyled = ຄໍເຕົ້າໄຂ່ທີ່ .ListView`
`;
ຫ້ອງຮຽນ TestScreenStyled ຂະຫຍາຍອົງປະກອບ {
  ຜູ້ສ້າງ (props) {
    super (props);
    const ds = ListView.DataSource ໃໝ່ ({rowHasChanged: (r1, r2) => r1! == r2});
    this.state = {
      ແຫລ່ງຂໍ້ມູນ: ds.cloneWithRows (testData),
    };
  }
  ສ່ວນປະກອບWillMount () {
    console.log (`ListView - ການສະ ໜອງ $ {testData.length} components`);
    console.time ('ຄໍເຕົ້າໄຂ່ທີ່');
  }
componentDidMount () {
    console.timeEnd ('ຮູບແບບ');
  }
renderRow (ແຖວ) {
    ກັບຄືນ {row.name} ;
  }
renderListView () {
    ກັບມາ (
      <ລາຍຊື່ ViewViewStyled
        dataSource = {this.state.dataSource}
        renderRow = {this.renderRow}
        enableEmptySections = {ຄວາມຈິງ}
      />
    );
  }
renderScrollView () {
    ກັບມາ (
      
        {testData.map ((ແຖວ, ດັດສະນີ) => <ແຖວ ສຳ ຄັນ = {ດັດຊະນີ)> <ຖອຍຫຼັງ <{ຊື່ຫຍໍ້}  )}
      
    );
  }
render () {
    ກັບຄືນ this.renderListView ();
  }
}
ສົ່ງອອກຄ່າເລີ່ມຕົ້ນ TestScreenStyled;

ຜົນການປະຕິບັດ

ສ່ວນປະກອບທີ່ມີຮູບແບບໃນປະຈຸບັນໄດ້ ດຳ ເນີນໄປໃນທາງທີ່ດີກ່ວາລຸ້ນລຸ້ນລ້າສຸດ. ມັນມີປະມານ 1 difference2 ວິນາທີທີ່ແຕກຕ່າງກັນໃນການອອກແບບລຸ້ນ ໃໝ່ ຫຼ້າສຸດທຽບກັບຕົ້ນສະບັບໃນການທົດສອບ ScrollView. ຂ້າພະເຈົ້າພຽງແຕ່ທົດສອບເວລາທີ່ມັນໃຊ້ເວລາຈາກ componentWillMount ໄປຫາ componentDidMount, ສຳ ລັບການເຮັດສ່ວນປະກອບໃນທັງ ListView ແລະ ScrollView. ເມື່ອເວົ້າເຖິງສ່ວນປະກອບທີ່ນ້ອຍກວ່າ (1000 ແລະຕ່ ຳ ກວ່າ) ໃນ ScrollView ຫຼືໃຊ້ ListView ສຳ ລັບປະລິມານສ່ວນປະກອບໃດໆ, ຈາກນັ້ນຄວາມແຕກຕ່າງແມ່ນບໍ່ ສຳ ຄັນລະຫວ່າງສ່ວນປະກອບແລະຮູບແບບພາຍໃນ.

ເມື່ອທ່ານ ກຳ ລັງ ນຳ ໃຊ້ສ່ວນປະກອບ ຈຳ ນວນຫຼວງຫຼາຍໃນລາຍຊື່, ທ່ານຕ້ອງການໃຊ້ ListView ແທນທີ່ຈະເປັນ ScrollView, ເພາະວ່າ ScrollView ພຽງແຕ່ໂຫລດທຸກຢ່າງໃນເວລາດຽວກັນ. ດັ່ງນັ້ນທ່ານຈະບໍ່ໃຊ້ ScrollView ຢ່າງແທ້ຈິງເພື່ອສະແດງສ່ວນປະກອບທີ່ໃຫຍ່. ຄວາມແຕກຕ່າງຂອງເວລາລະຫວ່າງການສະແດງສ່ວນປະກອບຕ່າງໆໃນລາຍຊື່ ViewView ໃນສ່ວນປະກອບທີ່ທຽບກັບຮູບແບບເສັ້ນ, ແມ່ນມີ ໜ້ອຍ ສຳ ລັບ ຈຳ ນວນສ່ວນປະກອບທີ່ແຕກຕ່າງກັນທັງ ໝົດ ທີ່ສະແດງອອກ. ເຖິງແມ່ນວ່າໃນເວລາທີ່ມັນກ່ຽວກັບການສະແດງສ່ວນປະກອບສ່ວນໃຫຍ່ໃນ ScrollView, ຮຸ່ນຫຼ້າສຸດກ່ຽວກັບແມ່ບົດ ສຳ ລັບສ່ວນປະກອບທີ່ມີຄໍເຕົ້າໄຂ່ມາໃກ້ຄຽງກັບຮູບແບບພາຍໃນ.

ສະຫຼຸບ

ສ່ວນປະກອບທີ່ທັນສະ ໄໝ ກຳ ລັງຈະເຂົ້າໃກ້ແລະໃກ້ຊິດກັບຄວາມໄວໃນຮູບແບບເສັ້ນ. ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ທຸກຄົນທົດລອງໃຊ້ໃນໂຄງການຂອງພວກເຂົາ, ມັນເປັນສິ່ງທີ່ຫາຍາກຖ້າທ່ານເຄີຍສະ ເໜີ ສ່ວນປະກອບ ຈຳ ນວນຫຼວງຫຼາຍໃນ ScrollView. ການປະຕິບັດງານຂອງ ListView ສຳ ລັບສ່ວນປະກອບທີ່ມີຮູບຊົງແມ່ນເກືອບຄືກັນກັບການປະຕິບັດງານຂອງຮູບແບບເສັ້ນໃນແມ່ນແຕ່ ສຳ ລັບຊຸດສ່ວນປະກອບທີ່ໃຫຍ່ທີ່ສຸດ. ປະລິມານຂອງສະພາບການແລະຄວາມສາມາດອ່ານໄດ້ທີ່ອົງປະກອບທີ່ມີຮູບແບບໃຫ້ກັບສ່ວນປະກອບແລະ ໜ້າ ຈໍຂອງທ່ານແມ່ນຄຸ້ມຄ່າກັບຄ່າໃຊ້ຈ່າຍໃນການປະຕິບັດງານນ້ອຍໆ (ຖ້າມີ) ໃນຫຼາຍໆກໍລະນີ. ຂ້າພະເຈົ້າບໍ່ຕ້ອງສົງໃສໃນໃຈຂອງຂ້າພະເຈົ້າເພາະວ່າການປັບປຸງໃນອະນາຄົດຕໍ່ກັບສ່ວນປະກອບທີ່ມີຮູບແບບເກີດຂື້ນ, ພວກເຮົາຈະເລີ່ມເຫັນຊ່ອງຫວ່າງການປະຕິບັດກາຍເປັນຂະ ໜາດ ນ້ອຍກວ່າ.

Repo ຢູ່ທີ່ນີ້: https://github.com/jm90m/rn-styled-components-performance