Det finns flera sätt att kartlägga en lista i React JS. Här är några av de mest populära sätten som majoriteten av utvecklare använder idag.
Några av de vanligaste är:
1. Använd metoden Array.map():
Denna metod skapar en ny array med resultatet av att anropa en tillhandahållen funktion på varje element i den ursprungliga arrayen. I React kan du använda den här metoden för att rendera en lista med objekt som en uppsättning av React-komponenter.
Till exempel:
const myList = ['item1', 'item2', 'item3']; const myComponentList = myList.map((item, index) => ( <li key={index}>{item}</li>
)); return ( <ul> {myComponentList} </ul>
);
2. Använd for…of-loopen:
Denna loop låter dig iterera över värdena för ett itererbart objekt, till exempel en array. I React kan du använda denna loop för att rendera en lista med objekt som en uppsättning av React-komponenter.
Till exempel:
const myList = ['item1', 'item2', 'item3']; const myComponentList = []; for (const item of myList) { myComponentList.push(<li>{item}</li>);
} return ( <ul> {myComponentList} </ul>
);
Som du kan se i ovanstående utdrag binder vi utanför return-satsen objekt till en nyskapad array och använder sedan den arrayen i returblocket.
3.Med Array.forEach()-metoden:
Denna metod låter dig utföra en tillhandahållen funktion en gång för varje arrayelement. I React kan du använda den här metoden för att skapa en array av React-komponenter och sedan rendera dem.
Till exempel:
const myList = ['item1', 'item2', 'item3']; const myComponentList = []; myList.forEach((item, index) => { myComponentList.push(<li key={index}>{item}</li>);
}); return ( <ul> {myComponentList} </ul>
);
Det är mycket behändigare än för ..of loop.
Den här metoden gör samma sak som vi gjorde genom loopen for..of men som vi vet har Foreach loop i Javascript sina förlängningsmetoder så det blir mycket lättare att använda dem snabbt där det behövs istället för att skapa nya loopar och variabler.
Slutsats:
Sammantaget beror valet av metod på de specifika kraven för din React-applikation och personliga preferenser. Jag föredrar att du använder det bästa möjliga sättet som förbättrar din applikationsprestanda och det är den första metoden (med kartfunktion) om det inte finns några andra kriterier att uppnå.
Som vi alla vet är utvecklare som använder React mer benägna att förbättra applikationens prestanda snarare än att lägga till push-kod i appen utan att veta hur skadlig den är ur prestandasynpunkt.
De flesta nybörjare gör dessa misstag när de bara behöver slutföra funktionerna och få appen att bara fungera.
Tack så mycket för att du stöttar mig.
Jag skulle älska att se dig i listan över följare på kod mentor.
Följ med mig på kod mentor och få besked om mina kommande artiklar om programmeringstips och tricks, verktyg, ramverk, teknologier och uppdateringar.
Håll utkik och håll dig uppdaterad!
- SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
- PlatoAiStream. Web3 Data Intelligence. Kunskap förstärkt. Tillgång här.
- Minting the Future med Adryenn Ashley. Tillgång här.
- Källa: https://www.codementor.io/rizatech/different-ways-to-map-a-list-in-react-js-24deu7alb2
