ஃப்ளாஷ்லிஸ்ட்டில் திறமையான ரெண்டரிங் மாஸ்டரிங்
எதிர்வினை பூர்வீகத்தில் பெரிய தரவுத்தொகுப்புகளுடன் பணிபுரிவது ஒரு சவாலாக இருக்கும், குறிப்பாக பயன்படுத்தும் போது ஒளிரும் பட்டியல் செயல்திறன் தேர்வுமுறைக்கு. டெவலப்பர்கள் எதிர்கொள்ளும் ஒரு பொதுவான பிரச்சினை, மேலும் கீழேயும் கீழேயும் ஸ்க்ரோலிங் செய்யும் போது கூறுகளின் தேவையற்ற மறு rendering ஆகும். .
இது பின்தங்கிய செயல்திறன், ஒளிரும் UI மற்றும் ஒட்டுமொத்த துணை பயனர் அனுபவத்திற்கு வழிவகுக்கும். உங்களைப் போன்ற பல தொடக்கக்காரர்கள் இதைப் பயன்படுத்துவதன் மூலம் இதைத் தீர்க்க முயற்சிக்கிறார்கள் தூய்மையான அல்லது React.memo, ஆனால் சில நேரங்களில் இந்த தீர்வுகள் எதிர்பார்த்தபடி செயல்படுவதாகத் தெரியவில்லை.
நீங்கள் உணவு விநியோக பயன்பாட்டை உருவாக்குகிறீர்கள் என்று கற்பனை செய்து பாருங்கள், அங்கு பயனர்கள் நூற்றுக்கணக்கான உள்ளமைக்கப்பட்ட மெனு உருப்படிகளை உருட்டலாம். ஒவ்வொரு சுருள் இயக்கமும் அனைத்து பொருட்களையும் புதுப்பிக்கும்படி கட்டாயப்படுத்தினால், அது பயன்பாட்டை மெதுவாக்கும் மற்றும் பயனர்களை விரக்தியடையச் செய்யும். இந்த வழிகாட்டியில் நாம் சமாளிக்கப் போகிறோம்.
இந்த கட்டுரையில், ஃப்ளாஷ்லிஸ்ட் மறு ரெண்டர்கள் ஏன் நிகழ்கின்றன, எதிர்வினை எவ்வாறு கூறு புதுப்பிப்புகளை கையாளுகிறது மற்றும் மென்மையான ஸ்க்ரோலிங் செயல்திறனை உறுதி செய்வதற்கான சிறந்த நடைமுறைகளை ஆராய்வோம். நீங்கள் ஒரு தொடக்க வீரராக இருந்தாலும் அல்லது அனுபவமிக்க டெவலப்பராக இருந்தாலும், இந்த நுண்ணறிவுகள் தடையற்ற UI அனுபவத்தை உருவாக்க உதவும். .
| கட்டளை | பயன்பாட்டின் எடுத்துக்காட்டு |
|---|---|
| FlashList | ஷாப்பிஃபியின் ஃப்ளாஷ்லிஸ்ட் நூலகத்திலிருந்து உயர் செயல்திறன் கொண்ட பட்டியல் கூறு, தேவையற்ற மறு ரெண்டர்களைக் குறைப்பதன் மூலம் பெரிய தரவுத்தொகுப்புகளுக்கு உகந்ததாகும். |
| memo() | கூறுகளின் முட்டுகள் மாறாதபோது தேவையற்ற மறு வெளியீடுகளைத் தடுப்பதன் மூலம் செயல்பாட்டு கூறுகளை மேம்படுத்த பயன்படுகிறது. |
| useCallback() | ஒவ்வொரு ரெண்டரின் செயல்பாட்டை மீண்டும் உருவாக்குவதைத் தடுக்க, ரெண்டரிடெம் கால்பேக்குகளில் செயல்திறனை மேம்படுத்துகிறது. |
| useMemo() | ஃபிளாஷ்லிஸ்ட் கூறுக்கு பெரிய தரவுத்தொகுப்புகளை உருவாக்குவது போன்ற விலையுயர்ந்த கணக்கீடுகளை நினைவுபடுத்துவதன் மூலம் செயல்திறனை மேம்படுத்துகிறது. |
| estimatedItemSize | ஒரு ஃப்ளாஷ்லிஸ்ட்-குறிப்பிட்ட சொத்து, இது பொருட்களின் அளவை மதிப்பிடுவதன் மூலம் ரெண்டரிங் மேம்படுத்தவும், ஸ்க்ரோலிங் செயல்திறனை மேம்படுத்துவதன் மூலமும் உதவுகிறது. |
| keyExtractor | ஒவ்வொரு பட்டியல் உருப்படிக்கும் ஒரு தனித்துவமான விசையை ஒதுக்குகிறது, தரவு மாறும்போது தேவையற்ற மறு வெளியீடுகளைத் தடுக்கிறது. |
| useEffect() | கூறு ஏற்றப்படும்போது ஃபிளாஷ்லிஸ்ட் கூறுகளில் ஆரம்ப தரவுத்தொகுப்பை அமைப்பது போன்ற பக்க விளைவுகளை கையாளுகிறது. |
| StyleSheet.create() | எதிர்வினை சொந்த கூறுகளின் ரெண்டரிங் செயல்திறனை மேம்படுத்த உகந்த மற்றும் மாறாத பாணி பொருள்களை உருவாக்குகிறது. |
| showsVerticalScrollIndicator | ஃபிளாஷ்லிஸ்ட்டில் உள்ள ஒரு சொத்து, செங்குத்து உருள் பட்டியின் தெரிவுநிலையைக் கட்டுப்படுத்துகிறது, பயனர் அனுபவத்தை மேம்படுத்துகிறது. |
ரியாக்ட் நேட்டிவ் இல் ஃபிளாஷ்லிஸ்ட் ரெண்டரிங் மேம்படுத்துதல்
பெரிய தரவுத்தொகுப்புகளுடன் கையாளும் போது பூர்வீக எதிர்வினை, மென்மையான பயனர் அனுபவத்தை உறுதிப்படுத்த தரவு வழங்கப்படும் முறையை மேம்படுத்துவது மிக முக்கியம். முந்தைய எடுத்துக்காட்டுகளில் வழங்கப்பட்ட ஸ்கிரிப்ட்கள் ஒரு ஃபிளாஷ்லிஸ்ட் கூறு மூலம் ஸ்க்ரோலிங் செய்யும் போது தேவையற்ற மறு பரிமாற்றங்களைத் தடுப்பதை நோக்கமாகக் கொண்டுள்ளன. முதல் முறை பயன்படுத்துகிறது நினைவகம் வழியாக மெமோ () செயல்பாடு, இது பட்டியல் உருப்படிகளை மூடுகிறது மற்றும் அவற்றின் முட்டுகள் மாறாவிட்டால் அவற்றை மீண்டும் ரெண்டரிங் செய்வதைத் தடுக்கிறது. இது செயலாக்கத்தை கணிசமாகக் குறைக்கிறது மற்றும் செயல்திறனை மேம்படுத்துகிறது. நூற்றுக்கணக்கான பொருட்களுடன் உணவு விநியோக பயன்பாட்டின் மூலம் ஸ்க்ரோலிங் செய்வதை கற்பனை செய்து பாருங்கள் -தேர்வுமுறை இல்லாமல், ஒவ்வொரு சுருளும் ஒரு பின்தங்கிய இடைமுகத்தை ஏற்படுத்தக்கூடும். .
இரண்டாவது அணுகுமுறை இணைப்பதன் மூலம் ஒரு படி மேலே செல்கிறது usecallback () மற்றும் usememo (). ஒவ்வொரு ரெண்டரிலும் செயல்பாடுகள் மற்றும் விலையுயர்ந்த கணக்கீடுகளின் மறு உருவாக்கத்தைத் தடுக்க இந்த கொக்கிகள் அவசியம். usememo () தரவுத்தொகுப்பு ஒரு முறை மட்டுமே உருவாக்கப்படுவதை உறுதி செய்கிறது usecallback () ஒவ்வொரு பட்டியல் உருப்படிக்கும் ரெண்டர் செயல்பாடு ரெண்டர்கள் முழுவதும் நிலையானதாக இருப்பதை உறுதி செய்கிறது. இந்த மேம்படுத்தல்கள் ஒரு பெரிய வித்தியாசத்தை ஏற்படுத்துகின்றன, குறிப்பாக சிக்கலான உள்ளமைக்கப்பட்ட கட்டமைப்புகளைக் கையாளும் போது, பல துணை உருப்படிகளுடன் உணவு வகைகள் போன்றவை.
ஸ்கிரிப்ட்டின் மற்றொரு முக்கிய அம்சம் மதிப்பீட்டு முறைகள் சொத்து. இது ஃப்ளாஷ்லிஸ்ட்டுக்கு குறிப்பிட்டது மற்றும் கணினி உருப்படி உயரங்களை முன்னிலைப்படுத்த உதவுகிறது, திறமையான நினைவக பயன்பாட்டை உறுதி செய்கிறது மற்றும் ஸ்க்ரோலிங் செய்யும் போது ஒளிரும். இந்த சொத்து இல்லாமல், ஃப்ளாஷ்லிஸ்ட் ஒரு மென்மையான ஸ்க்ரோலிங் அனுபவத்தை பராமரிக்க போராடக்கூடும், குறிப்பாக குறைந்த-இறுதி சாதனங்களில். ஒரு ஆன்லைன் மளிகைக் கடையைப் பற்றி யோசித்துப் பாருங்கள், அங்கு ஆயிரக்கணக்கான தயாரிப்புகள் மூலம் நீங்கள் தடையின்றி உருட்டலாம் - இந்த மேம்படுத்தல்கள் அதை சாத்தியமாக்குகின்றன. .
இறுதியாக, பாணி தேர்வுமுறை முக்கியமானது. ஸ்டைல்களை இன்லைன் நேரடியாக வரையறுப்பதற்கு பதிலாக, ஸ்கிரிப்ட் பயன்படுத்துகிறது Styleseet.create (), இது பாணிகளை திறம்பட மேம்படுத்தவும், கேச் செய்யவும் பூர்வீகத்தை அனுமதிக்கிறது. இது மறு வெளியீடுகளின் போது பாணிகளை மீண்டும் பயன்படுத்துவதற்கு எடுக்கப்பட்ட நேரத்தைக் குறைக்கிறது, மேலும் செயல்திறனை மேலும் மேம்படுத்துகிறது. ஒன்றிணைக்கும்போது, இந்த நுட்பங்கள் மிகவும் திறமையான பட்டியல் ரெண்டரிங் பொறிமுறையை உருவாக்குகின்றன, இது பெரிய அளவிலான பயன்பாடுகளில் தடையற்ற பயனர் அனுபவத்தை உறுதி செய்கிறது. இந்த சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், டெவலப்பர்கள் தேவையற்ற மறு வெளியீடுகளைத் தடுக்கலாம் மற்றும் அதிக செயல்திறன் மிக்க மொபைல் பயன்பாடுகளை உருவாக்கலாம். .
உகந்த செயல்திறனுக்காக ஃபிளாஷ்லிஸ்ட்டில் தேவையற்ற மறு வெளியீடுகளைத் தடுப்பது
உகந்த ரெண்டரிங் நுட்பங்களுடன் எதிர்வினை பூர்வீகத்தில் ஃபிளாஷ் பட்டியலை செயல்படுத்துதல்
import React, { useState, useEffect, memo } from "react";import { View, Text, Image, StyleSheet } from "react-native";import { FlashList } from "@shopify/flash-list";const generateSampleData = () => {return Array.from({ length: 100 }, (_, index) => ({id: index.toString(),name: `Food Item ${index + 1}` ,image: `https://source.unsplash.com/80x80/?food&random=${index}` ,price: (Math.random() * 50 + 5).toFixed(2),rating: (Math.random() * 5).toFixed(1),}));};const MemoizedItem = memo(({ item }) => {return (<View style={styles.itemContainer}><Image source={{ uri: item.image }} style={styles.image} /><Text>{item.name}</Text></View>);});const FlashListScreen = () => {const [data, setData] = useState([]);useEffect(() => {setData(generateSampleData());}, []);return (<View style={styles.container}><FlashListdata={data}renderItem={({ item }) => <MemoizedItem item={item} />}keyExtractor={(item) => item.id}estimatedItemSize={100}/></View>);};const styles = StyleSheet.create({container: { flex: 1, backgroundColor: "#fff", paddingHorizontal: 10 },itemContainer: { flexDirection: "row", alignItems: "center", padding: 10 },image: { width: 50, height: 50, borderRadius: 25, marginRight: 10 },});export default FlashListScreen;
USECALLBACK மற்றும் USEMEMO உடன் ஃபிளாஷ்லிஸ்ட் செயல்திறனை மேம்படுத்துதல்
மறு ரெண்டர்களைக் குறைப்பதன் மூலம் ரியாக்ட் நேட்டிவ் ஃபிளாஷ் பட்டியலில் செயல்திறனை மேம்படுத்துதல்
import React, { useState, useEffect, useCallback, useMemo } from "react";import { View, Text, Image, StyleSheet } from "react-native";import { FlashList } from "@shopify/flash-list";const generateSampleData = useMemo(() => {return () => Array.from({ length: 100 }, (_, index) => ({id: index.toString(),name: `Food Item ${index + 1}` ,image: `https://source.unsplash.com/80x80/?food&random=${index}` ,price: (Math.random() * 50 + 5).toFixed(2),rating: (Math.random() * 5).toFixed(1),}));}, []);const RenderItem = useCallback(({ item }) => (<View style={styles.itemContainer}><Image source={{ uri: item.image }} style={styles.image} /><Text>{item.name}</Text></View>), []);const FlashListScreen = () => {const [data, setData] = useState([]);useEffect(() => {setData(generateSampleData());}, [generateSampleData]);return (<View style={styles.container}><FlashListdata={data}renderItem={({ item }) => <RenderItem item={item} />}keyExtractor={(item) => item.id}estimatedItemSize={100}/></View>);};const styles = StyleSheet.create({container: { flex: 1, backgroundColor: "#fff", paddingHorizontal: 10 },itemContainer: { flexDirection: "row", alignItems: "center", padding: 10 },image: { width: 50, height: 50, borderRadius: 25, marginRight: 10 },});export default FlashListScreen;
ஃப்ளாஷ்லிஸ்ட்டில் தேவையற்ற மறு வெளியீடுகளைத் தடுக்க மேம்பட்ட நுட்பங்கள்
பயன்படுத்துவதற்கு அப்பால் தூய்மையான மற்றும் நினைவகம், மேம்படுத்த மற்றொரு பயனுள்ள அணுகுமுறை ஒளிரும் பட்டியல் ரெண்டரிங் என்பது செயல்படுத்தல் மெய்நிகராக்கம். மெய்நிகராக்கம் எந்த நேரத்திலும் பொருட்களின் துணைக்குழு மட்டுமே வழங்கப்படுவதை உறுதி செய்கிறது, இது பயன்பாட்டின் நினைவகம் மற்றும் CPU நுகர்வு கணிசமாகக் குறைக்கிறது. ஆழமான உள்ளமைக்கப்பட்ட கட்டமைப்புகளைக் கையாளும் போது இந்த நுட்பம் மிகவும் பயனுள்ளதாக இருக்கும், அங்கு ஒவ்வொரு பெற்றோர் கூறுகளும் பல குழந்தை கூறுகளைக் கொண்டுள்ளன. மெய்நிகராக்கம் இல்லாமல், ஆயிரக்கணக்கான பொருட்களை ஒரே நேரத்தில் வழங்குவது செயல்திறன் தடைகளை ஏற்படுத்தும், இது மெதுவான ஸ்க்ரோலிங் மற்றும் யுஐ லேக் ஆகியவற்றிற்கு வழிவகுக்கும்.
கருத்தில் கொள்ள வேண்டிய மற்றொரு முக்கிய காரணி சரியான பயன்பாடு getitemtype செயல்பாடு. இல் ஒளிரும் பட்டியல், இந்த செயல்பாடு டெவலப்பர்களை வெவ்வேறு உருப்படி வகைகளை வகைப்படுத்த அனுமதிக்கிறது, குறிப்பிட்ட உருப்படிகள் மட்டுமே மாறும்போது முழு பட்டியலுக்கும் தேவையற்ற புதுப்பிப்புகளைத் தடுக்கிறது. எடுத்துக்காட்டாக, தயாரிப்புகள் வகையால் தொகுக்கப்பட்ட ஒரு சந்தை பயன்பாட்டில், பயன்படுத்தி getitemtype முழு பட்டியலையும் மீண்டும் வழங்குவதற்கு பதிலாக மாற்றியமைக்கப்பட்ட வகையை மட்டுமே புதுப்பிக்க உதவுகிறது. இது செயல்திறனை கணிசமாக மேம்படுத்துகிறது, குறிப்பாக குறைந்த-இறுதி சாதனங்களில். .
கடைசியாக, மேம்படுத்துதல் சூழல் பயன்பாடு எதிர்வினை பயன்பாடுகளுக்குள் மேம்படுத்துவதில் முக்கிய பங்கு வகிக்கிறது ஒளிரும் பட்டியல் திறன். REDUX அல்லது CONTERVER API போன்ற உலகளாவிய மாநில மேலாண்மை கருவிகளைப் பயன்படுத்தும் போது, மாநில புதுப்பிப்புகளால் ஏற்படும் தேவையற்ற மறு பங்குகளைத் தவிர்ப்பது அவசியம். மாநிலத்தை சிறிய, சுயாதீனமான சூழல்களாகப் பிரிப்பதன் மூலமும், தேவையான தரவை மட்டுமே பிரித்தெடுக்க தேர்வாளர்களைப் பயன்படுத்துவதன் மூலமும், டெவலப்பர்கள் மறு ரெண்டர்களைக் குறைக்க முடியும். உதாரணமாக, அரட்டை நூல்களைக் காண்பிக்கும் செய்தியிடல் பயன்பாட்டில், புதிய செய்தியைப் பெற்றவுடன் முழு பட்டியலையும் புதுப்பிப்பதற்கு பதிலாக, பாதிக்கப்பட்ட உரையாடல் நூல் மட்டுமே மீண்டும் வழங்கப்பட வேண்டும். இந்த சிறிய மற்றும் பயனுள்ள உத்திகள் மென்மையான, உயர் செயல்திறன் கொண்ட பயனர் அனுபவத்தை உறுதிப்படுத்த உதவுகின்றன. .
ஃப்ளாஷ்லிஸ்ட் தேர்வுமுறை குறித்து அடிக்கடி கேட்கப்படும் கேள்விகள்
- ஏன் FlashList பிளாட்லிஸ்ட்டில் பரிந்துரைக்கப்படுகிறது?
- FlashList பெரிய தரவுத்தொகுப்புகளுக்கு உகந்ததாக உள்ளது, பிளாட்லிஸ்ட்டுடன் ஒப்பிடும்போது சிறந்த செயல்திறன், மென்மையான ஸ்க்ரோலிங் மற்றும் குறைக்கப்பட்ட நினைவக பயன்பாடு ஆகியவற்றை வழங்குகிறது.
- எப்படி memo() மறு வெளியீடுகளைத் தடுக்க உதவவா?
- memo() தேவையற்ற புதுப்பிப்புகளைத் தடுக்க ஒரு செயல்பாட்டு கூறுகளை மூடுகிறது, அதன் முட்டுகள் மாறவில்லை என்றால், மறு ரெண்டர்களைக் குறைக்கிறது.
- இதன் பங்கு என்ன useCallback() ஃப்ளாஷ்லிஸ்ட்டை மேம்படுத்துவதில்?
- useCallback() ஃபிளாஷ்லிஸ்ட்டில் தேவையற்ற புதுப்பிப்புகளைத் தடுக்கும் அதே செயல்பாட்டு குறிப்பு ரெண்டர்கள் முழுவதும் பயன்படுத்தப்படுவதை உறுதி செய்கிறது renderItem.
- முடியும் estimatedItemSize செயல்திறனை மேம்படுத்தவா?
- ஆம், அமைப்பு estimatedItemSize ஃபிளாஷ்லிஸ்ட்டை முன்கூட்டிய உருப்படி உயரங்களுக்கு உதவுகிறது, தளவமைப்பு அளவுகளை மாறும் வகையில் கணக்கிட செலவழித்த நேரத்தைக் குறைக்கிறது.
- எப்படி முடியும் getItemType ரெண்டரிங் மேம்படுத்தவா?
- getItemType பட்டியல் உருப்படிகளை வகைப்படுத்துகிறது, முழு பட்டியலையும் மீண்டும் வழங்குவதற்கு பதிலாக குறிப்பிட்ட வகைகள் மட்டுமே புதுப்பிக்கப்படுவதை உறுதிசெய்க.
ஃப்ளாஷ்லிஸ்ட்டில் செயல்திறனை மேம்படுத்துதல்
பெரிய பட்டியல்களைக் கையாளும் போது, மென்மையான செயல்திறனை உறுதி செய்வது சிறந்த பயனர் அனுபவத்திற்கு முக்கியமானது. போன்ற நுட்பங்களைப் பயன்படுத்துவதன் மூலம் React.memo மற்றும் USECALLBACK, டெவலப்பர்கள் தேவையற்ற மறு வெளியீடுகளைத் தடுக்கலாம், CPU மற்றும் நினைவக பயன்பாட்டைக் குறைக்கலாம். தயாரிப்பு பட்டியல்கள் அல்லது சமூக ஊடக ஊட்டங்கள் போன்ற பெரிய தரவுத்தொகுப்புகளைக் கையாளும் பயன்பாடுகளுக்கு இந்த மேம்படுத்தல்கள் அவசியம். .
கூடுதலாக, ஃபிளாஷ்லிஸ்ட்-குறிப்பிட்ட பண்புகள் போன்றவை மதிப்பீட்டு முறைகள் மற்றும் getitemtype ஸ்க்ரோலிங் திரவத்தை மேலும் மேம்படுத்தவும். தரவை ஒழுங்காக கட்டமைப்பதன் மூலமும், கூறு புதுப்பிப்புகளை மேம்படுத்துவதன் மூலமும், டெவலப்பர்கள் அதிக செயல்திறன் கொண்ட பயன்பாடுகளை உருவாக்க முடியும். இந்த நுட்பங்களை மாஸ்டர் செய்வது சிக்கலான, தரவு-கனமான பயன்பாடுகள் கூட சீராக இயங்குவதை உறுதி செய்கிறது, பயனர்களுக்கு தடையற்ற மற்றும் திறமையான அனுபவத்தை வழங்குகிறது. .
நம்பகமான ஆதாரங்கள் மற்றும் குறிப்புகள்
- அதிகாரப்பூர்வ ஆவணங்கள் ஒளிரும் பட்டியல் Shopify இலிருந்து, அதன் செயல்படுத்தல் மற்றும் தேர்வுமுறை நுட்பங்களை விவரிக்கிறது: ஷாப்பிஃபி ஃபிளாஷ்லிஸ்ட் டாக்ஸ் .
- பிளாட்லிஸ்ட் மற்றும் மெய்நிகராக்கத்தைப் பயன்படுத்தி பெரிய பட்டியல்களைக் கையாள்வதில் நேட்டிவ் அதிகாரப்பூர்வ வழிகாட்டியை எதிர்வினையாற்றுங்கள்: சொந்த பிளாட்லிஸ்ட் டாக்ஸ் எதிர்வினையாற்றுங்கள் .
- நினைவகம் நுட்பங்களைப் பயன்படுத்தி எதிர்வினை பயன்பாடுகளில் தேவையற்ற மறு பங்குகளைத் தடுப்பது குறித்த விரிவான பயிற்சி: React.memo ஆவணங்கள் .
- எதிர்வினை பூர்வீகத்திற்கான செயல்திறன் தேர்வுமுறை உத்திகள், மாநிலத்தை நிர்வகிப்பதற்கான சிறந்த நடைமுறைகள் மற்றும் ரெண்டரிங் உட்பட: லோகிராக்கெட் செயல்திறன் வழிகாட்டி .