علت کرش برنامه در react native

[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 کردم بازم جواب نداد و این لاگ رو انداخت.
آیا راهی میشناسی برای این مشکل؟
یه دنیا سپاس از پاسخگوییت برادر

[مهدی حسن زاده]

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

[jr.quiker2020]

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

[مهدی حسن زاده]

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

[jr.quiker2020]

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

[مهدی حسن زاده]

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

[jr.quiker2020]

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

[مهدی حسن زاده]

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

[نویسنده]

نوشته‌ها