React Keys

  • Post
    React Keys

    Key adalah pengenal unik. Di React, ini digunakan untuk mengidentifikasi item mana yang telah diubah, diperbarui, atau dihapus dari lists. Ini berguna ketika kita membuat komponen secara dinamis atau ketika pengguna mengubah daftar. Ini juga membantu untuk menentukan komponen mana dalam koleksi yang perlu dirender ulang alih-alih merender ulang seluruh rangkaian komponen setiap saat.

    Key harus diberikan di dalam larik untuk memberikan elemen identitas yang stabil. Cara terbaik untuk memilih key sebagai string yang secara unik mengidentifikasi item dalam daftar. Itu bisa dipahami dengan contoh di bawah ini.

    Contoh

    1. const stringLists = [  ‘Peter’ ,  ‘Sachin’ ,  ‘Kevin’ ,  ‘Dhoni’ ,  ‘Alisa’  ];
    2. const updatedLists = stringLists.map ((strList) => {
    3. <li key = {strList.id}> {strList} </li>;
    4. });

    Jika tidak ada ID yang stabil untuk item yang dirender, Anda dapat menetapkan indeks item sebagai key ke daftar. Itu dapat ditunjukkan pada contoh di bawah ini.

    Contoh

    1. const stringLists = [  ‘Peter’ ,  ‘Sachin’ ,  ‘Kevin’ ,  ‘Dhoni’ ,  ‘Alisa’  ];
    2. const updatedLists = stringLists.map ((strList, index) => {
    3. <li key = {index}> {strList} </li>;
    4. });

    Catatan: Tidak disarankan menggunakan indeks untuk kunci jika urutan item dapat berubah di masa mendatang. Ini menimbulkan kebingungan bagi pengembang dan dapat menyebabkan masalah dengan status komponen.

    Menggunakan Key dengan komponen

    Pertimbangkan Anda telah membuat komponen terpisah untuk ListItem dan mengekstrak ListItem dari komponen itu. Dalam kasus ini, Anda harus menetapkan kunci pada elemen <ListItem /> dalam array, bukan ke <li> elemen dalam ListItem itu sendiri. Untuk menghindari kesalahan, Anda harus ingat bahwa kunci hanya masuk akal dalam konteks array sekitarnya. Jadi, apa pun yang Anda kembalikan dari fungsi map () direkomendasikan untuk diberi key.

    Contoh: Penggunaan Key yang Salah

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. function ListItem(props) {
    4. const item = props.item;
    5. return (
    6. // Wrong! No need to specify the key here.
    7. <li key={item.toString()}>
    8. {item}
    9. </li>
    10. );
    11. }
    12. function NameList(props) {
    13. constmyLists = props.myLists;
    14. constlistItems = myLists.map((strLists) =>
    15. // The key should have been specified here.
    16. <ListItem item={strLists} />
    17. );
    18. return(
    19. <div>
    20. <h2>Incorrect Key Usage Example</h2>
    21. <ol>{listItems}</ol>
    22. </div>
    23. );
    24. }
    25. constmyLists = [‘Peter’, ‘Sachin’, ‘Kevin’, ‘Dhoni’, ‘Alisa’];
    26. render(
    27. <NameList myLists={myLists}/>,
    28. getElementById(‘app’)
    29. );
    30. export defaultApp;

    Dalam contoh yang diberikan, daftar berhasil dirender. Namun ini bukanlah praktik yang baik bahwa kami tidak menetapkan kunci ke iterator map ().

    Contoh: Penggunaan Tombol yang Benar

    Untuk memperbaiki contoh di atas, kita harus menetapkan kunci ke iterator map ().

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. function ListItem(props) {
    4. const item = props.item;
    5. return (
    6. // No need to specify the key here.
    7. <li> {item} </li>
    8. );
    9. }
    10. function NameList(props) {
    11. constmyLists = props.myLists;
    12. constlistItems = myLists.map((strLists) =>
    13. // The key should have been specified here.
    14. <ListItem key={myLists.toString()} item={strLists} />
    15. );
    16. return(
    17. <div>
    18. <h2>Correct Key Usage Example</h2>
    19. <ol>{listItems}</ol>
    20. </div>
    21. );
    22. }
    23. constmyLists = [‘Peter’, ‘Sachin’, ‘Kevin’, ‘Dhoni’, ‘Alisa’];
    24. render(
    25. <NameList myLists={myLists}/>,
    26. getElementById(‘app’)
    27. );
    28. export defaultApp;

     

    Uniqueness of Keys among Siblings

    Kami telah membahas bahwa penugasan kunci dalam array harus unik di antara siblings mereka . Namun, itu tidak berarti bahwa kunci tersebut harus unik secara global . Kita dapat menggunakan sekumpulan kunci yang sama dalam menghasilkan dua array yang berbeda. Hal tersebut dapat dipahami pada contoh di bawah ini.

    Contoh

    1. importReact from ‘react’;
    2. importReactDOM from ‘react-dom’;
    3. function MenuBlog(props) {
    4. const titlebar = (
    5. <ol>
    6. {props.data.map((show) =>
    7. <li key={show.id}>
    8. {show.title}
    9. </li>
    10. )}
    11. </ol>
    12. );
    13. constcontent = props.data.map((show) =>
    14. <div key={show.id}>
    15. <h3>{show.title}: {show.content}</h3>
    16. </div>
    17. );
    18. return(
    19. <div>
    20. {titlebar}
    21. <hr />
    22. {content}
    23. </div>
    24. );
    25. }
    26. constdata = [
    27. {id: 1, title: ‘First’, content: ‘Welcome to JavaTpoint!!’},
    28. {id: 2, title: ‘Second’, content: ‘It is the best ReactJS Tutorial!!’},
    29. {id: 3, title: ‘Third’, content: ‘Here, you can learn all the ReactJS topics!!’}
    30. ];
    31. render(
    32. <MenuBlog data={data} />,
    33. getElementById(‘app’)
    34. );
    35. export defaultApp;

     

    credit. javatpoint

     

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.