آموزش جاوااسکریپت انجمن ها react native علت کرش برنامه در react native

در حال نمایش 8 نوشته (از کل 8)
  • نویسنده
    نوشته‌ها
  • #48986 پاسخ
    jr.quiker2020
    مشارکت کننده

    سلام آقا مهدی
    من متوجه شدم یکی از علت های کرش برنامه این لاگه:
    LOG VirtualizedList: You have a large list that is slow to update – make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {“contentLength”: 6743.4287109375, “dt”: 7327, “prevDt”: 959}
    وقتی فلت لیست هام بلند میشه این لاگ رو میندازه.
    حالا من برای حل این مشکل چه کنم برادر؟؟؟
    اونی که خودش گفته رو هم، من همیشه از PureComponent استفاده میکنم تو همه جا.
    راجبه shouldComponentUpdate هم واس امتحان، لیستم رو داخل shouldComponentUpdate ریترن return کردم بازم جواب نداد و این لاگ رو انداخت.
    آیا راهی میشناسی برای این مشکل؟
    یه دنیا سپاس از پاسخگوییت برادر

    #49013 پاسخ

    سلام.
    ببین بهتره infinite scroll استفاده کنی تا هر زمان که کاربر به اخر صفحه رسید اطلاعات جدید دریافت بشه و یکدفعه یک حجم زیادی از اطلاعات برگشت داده نشه.
    همچنین props زیر رو حتما به flatlist بده
    removeClippedSubviews={Platform.OS == ‘ios’ ? false : true}
    در اصل میاد هنگامی که آیتم مورد نظر از ViewPort حذف میشه به صورت کامل پاکش می کنه و دفعه بعد برای نمایشش دوباره از اول رندرش می کنه خب اینکه خیلی خفنه می تونیم همیشه استفاده کنیم اینجاست که به یک عدد نه! بر میخوریم متاسفانه طبقه گفته خود فیسبوک این یکم باگ داره هنوز که نیاز داره فیکس بشه ولی خب پیشنهاد من اینکه برای اندروید استفاده کنید

    #49025 پاسخ
    jr.quiker2020
    مشارکت کننده

    برادر بازم همون لاگ رو میده.
    infiniti استفاده میکنم. پراپی هم که گفتی رو امتحان کردم ولی بازم مشکل برطرف نشد تعداد آیتم ها که از 10 تا بیشتر میشه اون لاگ رو میندازه.
    مشکلم اینه که این کامپوننتی که توی این فلت لیست استفاده میکنم سنگین و پیچیده س. تا حالا چند بار هم باز نویسی کردم که ساده تر بشه. توی کامپوننت، هم عکس رندر میشه هم ویدیو. اونم توی هر کامپوننت میتونه مثل پست اینستاگرام تا 5 تا عکس یا ویدیو باشه.
    قطعا یه سری تکنیک هایی هست که این مشکل رو حل کنه.
    توی خود اپ اینستاگرام با یه دیوایس اندروید 5 امتحان کردم شاید بیشتر از 500 تا آیتم پست رو توی یه بار تند تند اسکرول کردم برنامه آخ نگفت. واقعا کارشون ایول داره.

    #49030 پاسخ

    حتما یک جای کارتون مشکل داره و یک کامپوننت داره rerender میشه خیلی زیاد
    همچنین کتابخونه هایی که استفاده میکنید میتونه باعث مشکل بشه.
    مثلا با swiper من خودم این مشکل رو داشتم که باعث کندی برنامه میشد
    وگرنه react native خودش مشکلی نداره
    همیچنین برای عکس میتونید از کتابخونه react-native fast image استفاده کنید و عکس ها رو cache کنید

    #49043 پاسخ
    jr.quiker2020
    مشارکت کننده

    آقا مهدی من از react-native-swiper-flatlist استفاده میکنم. کتابخونه ی بهتری میشناسی که توی لیست جواب بده؟
    swiper معمولی توی لیست ها جواب نمیده.
    یه سوالم دارم این که چه دلایلی ممکنه باعث بشه یک کامپوننت rerender بشه؟؟؟ یه توضیح کوچولوهم راجب این بدی.
    یه دنیا سپاس برادر

    #49048 پاسخ

    ببینید با هر بروز رسانی state کامپوننت rerender میشه.
    حالا تصور کنید که در یک کامپوننت که شما از چند کامپوننت دیگه داخلش استفاده میکنی یک state داری که بروز میشه
    با بروز رسانی این state تمام کامپوننت های فرزندش هم بروز رسانی میشه

    #49075 پاسخ
    jr.quiker2020
    مشارکت کننده

    برادر من یه چیزو متوجه نشدم. ببین من الان داخل کامپوننتم از چند تا کامپوننت فرزند استفاده میکنم.
    آیا این کار اشتباهه؟؟ یعنی کلا از کامپوننت فرزند نباید استفاده کنم؟؟؟

    #49078 پاسخ

    نه .اتفاقا اصلش همینه
    ولی سعی کنید در کامپوننت والد state ای نداشته باشید که مدام نیاز به بروز رسانی داشته باشه چون با هر بروزرسانی state
    کامپوننت ها rerender میشه

در حال نمایش 8 نوشته (از کل 8)
پاسخ به: علت کرش برنامه در react native
اطلاعات شما: