6 راه ساده برای افزایش سرعت برنامه React Native

قبلا درباره بهبود کارایی برنامه با هک کردن Event loop صحبت کرده ام. هدف رسیدن به 60 فریم بر ثانیه است. تمام این ها در مورد React یا React Native هم صدق می کند. 

این ها کار هایی هستند که برای داشتن FPS بالاتر می توانید انجام دهید.

1- از PureComponent یا shouldComponentUpdate استفاده کنید

PureComponent در React هیچ state ای ندارد، فقط کامپوننت های شما را بر اساس داده های منتقل شده توسط prop ها رندر می کند، و تنها زمانی که prop ها تغییر کنند، آن را مجددا رندر می کند.

متود ShouldComponentupdate در کامپوننت معمولی و ناخالص React برای لغو رندر مجدد با برگرداندن false در سناریو های به خصوصی استفاده می شود.

از این دو کد نمونه برای انجام این کار استفاده کنید:

class MyComponent extends React.PureComponent {
  //
}
class MyComponent extends React.Component {
  //
  shouldComponentUpdate(nextProps, nextState) {
    if(this.props.firstProp === nextProps. firstProp &&
       this.props.secondProp === nextProps.secondProp) {
      return false;
    }
    return true
  }
  //
}

هر دو مثال بالا به شما در جلوگیری از رندر های اضافی کمک می کنند. مثال اول، منطق shouldComponentUpdate را برای شما پیاده سازی می کند. مثال دوم کمی کنترل بیشتر به شما می دهد. می توانید state را در کامپوننت حفظ کنید و اگر state تغییری نکرد، رندر مجدد را متوقف کنید. به این صورت:

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    if(this.state.isLoading === nextState. isLoading) {
      return false;
    }
    return true
  }
}

2- از صفت کلیدی بر روی آیتم های لیست استفاده کنید

لیست چیزی است که در هر برنامه ای به طور رایج استفاده می شود. اگر کلید خاصی برای هر آیتمی در لیست مشخص کنید، React هر ایتمی که به لیست اضافه شده، یا از آن حذف شده است را مجددا رندر می کند. داشتن یک کلید خاص برای هر ایتم، از رندر مجد جلوگیری می کند.

class MyComponent extends React.PureComponent {
  render() {
    return this.props.data.map((item, i) => {
      return <Text key={item.id}>{item.title}</Text>
    });
  }
}

3- اتصال پیش از موعد داخل رندر تابعی نمی سازد

از این کد استفاده کنید:

class MyComponent extends React.PureComponent {
  
  constructor(props) {
    super(props);
    this.doWork = this.doWork.bind(this);
  }
  doWork() {
    // doing some work here.
    // this.props.dispatch....
  }
  
  render() {
    return <Text onPress={this.doWork}>Do Some Work</Text>
  }
  
}

در داخل رندر این کد را استفاده نکنید:

<Text onPress={ () => this.doWork() }>Do Some Work</Text>

یا حتی این کد:

<Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>

در هر دو حالت بالا، به دلیل این که رندر فرا خوانده می شود، یک تابع جدید ساخته می شود.

اگر می خواهید آرگومان ها را به تابع doWork منتقل کنید، می توانید از بستری مانند این استفاده کنید:

doWork = (param) => () => {
 console.log(param)
}
<Text onPress={this.doWork(someVarParam)}Do Some Work With Args</Text>

4- از Update state یا Dispatch action ها در componentWillUpdate استفاده نکنید

متود componentWillUpdate برای آماده سازی برای یک بروز رسانی استفاده می شود، نه برای فعال سازی آن ها. اگر می خواهید state را تعیین کنید یا یک حرکت Redux را Dispatch کنید، آن ها را در componentWillRecieveProps انجام دهید.

5- برای Dataset های بزرگ از VirtualList، FlatList و SectionList استفاده کنید

از آنجایی که رابط اجرا کننده برای فعالیت مقدار رم کمتری اشغال می کند، به ازای هر سند، VirtualizedList، FlatList و SectionList در React Native رابط اجرا کننده برای لیست رندر ها است. پس اگر لیستی با صد ها ردیف دارید، تا زمانی که صفحه را به پایین اسکرول نکنید، تمام آنها بارگذاری نمی شوند.

VirtualizedList پایه FlatList و SectionList است. و اگر Dataset تغییر ناپذیری دارید، بهتر است مستقیما از VirtualizedList استفاده کنید.

6 - از Perf Monitor برای مشاهده نرخ FPS استفاده کنید

Developer Tools را باز کنید و Perf Monitor را فعال کنید. حال اگر شروع به تعامل، مرور یا اسکرول با برنامه خود کنید، ممکن است ببینید که گاهی FPS کاهش میابد. معمولا علت JS Thread است، نه Native UI Thread. پس به دنبال نقاطی که FPS کاهش پیدا می کند بگردید. شاید در حال تنظیم state یا Dispatch کردن Redux در جای نامناسب باشید. یا شاید هم در حال انجام کار بیش از اندازه ای در JS Thread باشید.

در مقاله بعدی ام درباره React Native تکنیک های پیشرفته تری را به اشتراک می گذارک.

منبع