Lai samazinātu atkārtotu renderēšanu programmā React Native, rīkojieties šādi:
1. Iegaumēšana:
- Izmantojiet opciju "useMemo", lai kešatmiņā saglabātu aprēķinus starp atkārtotu renderēšanu, novēršot nevajadzīgu atkārtotu renderēšanu, kad rekvizīti vai stāvoklis nav mainīts[1].
2. Virtualizētie saraksti:
- Izmantojiet "FlatList", "SectionList" vai "VirtualList", lai efektīvi atveidotu tikai ekrānā redzamos vienumus, optimizējot atmiņas lietojumu un renderēšanas veiktspēju[1].
3. Optimizēt attēlus:
- Izmantojiet bibliotēkas, piemēram, “react-native-fast-image” vai “expo-image”, lai optimizētu attēlu ielādi un saglabāšanu kešatmiņā, nodrošinot vienmērīgāku lietotāja pieredzi[1].
4. Atcelt dārgas darbības:
- Novērsiet pārmērīgus izsaukumus uz tādām funkcijām kā meklēšana un tīkla pieprasījumi, pirms funkcijas izpildes ieviešot aizkaves periodu vai "atkāpšanās aizkavi"[1].
5. Izmantojiet React.memo vai React.PureComponent:
- Nodrošiniet, lai komponenti tiktu atkārtoti renderēti tikai tad, kad mainās to rekvizīti, izmantojot “React.memo” vai “React.PureComponent”[3].
6. Izvairieties no nevajadzīgas atkārtotas renderēšanas:
- Izmantojiet "useMemo", lai ierobežotu objektu atjaunināšanu un izvairītos no nevajadzīgas atkārtotas renderēšanas, ko izraisa objektu literāļi vai dinamiski aprēķini[3].
7. Izmantojiet taustiņus, lai izvairītos no atkārtotas renderēšanas:
- Izmantojiet taustiņus, lai izvairītos no atkārtotas renderēšanas, kad mainās saraksta vienumi, nodrošinot efektīvu renderēšanu un veiktspēju[4].
8. Optimizējiet komponentu sastāvu:
- Nodrošiniet, lai komponenti tiktu veidoti efektīvi, izvairoties no nevajadzīgas atkārtotas renderēšanas un optimizējot tādu āķu izmantošanu kā "useMemo" un "useCallback"[4].
Šīs metodes palīdz samazināt atkārtoto renderēšanu programmā React Native, nodrošinot vienmērīgāku lietotāja pieredzi un labāku veiktspēju.
Citāts:[1] https://thoughtbot.com/blog/optimizing-performance-in-react-native-tips-and-techniques
[2] https://www.reddit.com/r/reactnative/comments/uaaxyu/tips_on_how_to_reduce_rerenders/
[3] https://www.debugbear.com/blog/react-rerenders
[4] https://dev.to/femi_akinyemi/how-to-prevent-unnecessary-react-component-re-rendering-3c08
[5] https://www.linkedin.com/pulse/avoid-unnecessary-re-renders-reactjs-christian-zanchetta