Norėdami sumažinti pakartotinį pateikimą React Native, vadovaukitės šiais būdais:
1. Atmintinės įrašymas:
- Naudokite „useMemo“, kad į talpyklą įrašytumėte skaičiavimus tarp pakartotinio pateikimo, kad išvengtumėte nereikalingo pakartotinio pateikimo, kai nepasikeitė rekvizitai ar būsena[1].
2. Virtualizuoti sąrašai:
- Naudokite „FlatList“, „SectionList“ arba „VirtualList“, kad efektyviai pateiktumėte tik ekrane matomus elementus, optimizuotumėte atminties naudojimą ir atvaizdavimo našumą[1].
3. Vaizdų optimizavimas:
– Naudokite tokias bibliotekas kaip „react-native-fast-image“ arba „expo-image“, kad optimizuotumėte vaizdų įkėlimą ir kaupimą talpykloje, užtikrinant sklandesnę vartotojo patirtį[1].
4. Brangių operacijų panaikinimas:
– Užkirsti kelią per dideliems iškvietimams į funkcijas, pvz., paieškos ir tinklo užklausas, nustatydami delsos laikotarpį arba „atsileidimo delsą“ prieš vykdant funkciją[1].
5. Naudokite React.memo arba React.PureComponent:
- Užtikrinkite, kad komponentai būtų pakartotinai pateikiami tik tada, kai pasikeičia jų rekvizitai, naudojant „React.memo“ arba „React.PureComponent“[3].
6. Venkite nereikalingo pakartotinio pateikimo:
- Naudokite „useMemo“, kad apribotumėte, kada objektai atnaujinami, ir išvengtumėte nereikalingo pakartotinio atvaizdavimo, kurį sukelia objektų literalai arba dinaminiai skaičiavimai[3].
7. Naudokite klavišus, kad išvengtumėte pakartotinio pateikimo:
- Naudokite klavišus, kad išvengtumėte pakartotinio atvaizdavimo, kai pasikeičia sąrašo elementai, užtikrindami efektyvų atvaizdavimą ir našumą[4].
8. Optimizuoti komponentų sudėtį:
- Užtikrinkite, kad komponentai būtų sudaryti efektyviai, vengdami nereikalingų pakartotinių atvaizdų ir optimizuodami kabliukų, pvz., „useMemo“ ir „useCallback“[4], naudojimą.
Šie metodai padeda sumažinti pakartotinį pateikimą „React Native“, užtikrinant sklandesnę vartotojo patirtį ir geresnį našumą.
Citatos:[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