Bagaimana anda membuat senarai data dalam React?

Bagaimana anda membuat senarai data dalam React?

Menyenaraikan senarai data dalam React melibatkan penyebaran melalui array data dan menggunakan fungsi map untuk menghasilkan senarai elemen React. Berikut adalah contoh cara membuat senarai item:

 <code class="jsx">const items = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, ]; function ListComponent() { return ( <ul> {items.map((item) => ( <li key="{item.id}">{item.name}</li> ))} </ul> ); }</code>

Dalam contoh ini, fungsi map digunakan untuk melangkah ke atas array items , dan untuk setiap item, item senarai ( <li> ) dibuat. Prop key adalah penting kerana ia membantu bertindak balas mengenal pasti item yang telah berubah, telah ditambah, atau telah dikeluarkan.

Apakah amalan terbaik untuk menggunakan kekunci apabila menyenaraikan senarai dalam React?

Apabila membuat senarai dalam React, menggunakan kunci adalah penting untuk prestasi dan perdamaian yang betul. Berikut adalah beberapa amalan terbaik untuk menggunakan kekunci:

<li> Keunikan: Pastikan kunci adalah unik dalam adik -beradik senarai. Cara terbaik untuk mencapai matlamat ini adalah dengan menggunakan pengenal unik dari data, seperti medan ID dalam pangkalan data anda. <li> Kestabilan: Kekunci harus tetap stabil dan tidak berubah apabila aplikasi anda berjalan. Elakkan menggunakan indeks array sebagai kekunci kerana memasukkan atau memadam item boleh mengalihkan indeks, yang membawa kepada pelaku semula yang tidak perlu. <li> Relevan dengan Data: Kekunci hendaklah berkait rapat dengan data yang anda berikan. Sebagai contoh, jika senarai anda terdiri daripada data pengguna, menggunakan ID pengguna sebagai kunci lebih sesuai daripada menggunakan nombor rawak. <li> Elakkan kekunci generik: Jangan gunakan kekunci generik seperti Math.random() atau Date.now() . Ini boleh membawa kepada isu -isu dengan perdamaian dan prestasi.

Berikut adalah contoh penggunaan kunci yang betul:

 <code class="jsx">const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ]; function UserList() { return ( <ul> {users.map((user) => ( <li key="{user.id}">{user.name}</li> ))} </ul> ); }</code>

Bagaimanakah anda dapat mengoptimumkan prestasi penyediaan senarai dalam React?

Mengoptimumkan prestasi penyediaan senarai dalam React dapat dicapai melalui beberapa teknik:

<li>

Memoization: Gunakan React.memo atau useMemo untuk mengelakkan penyenaraian item senarai yang tidak perlu. React.memo berguna untuk komponen berfungsi, dan useMemo boleh digunakan untuk mengoptimumkan pengiraan mahal.

 <code class="jsx">import React from 'react'; const Item = React.memo(function Item({ name }) { return <li>{name}</li>; }); function ListComponent({ items }) { return ( <ul> {items.map((item) => ( <item key="{item.id}" name="{item.name}"></item> ))} </ul> ); }</code>

<li> Virtualisasi: Apabila berurusan dengan senarai besar, pertimbangkan untuk menggunakan perpustakaan virtualisasi seperti react-window atau react-virtualized . Perpustakaan ini hanya menjadikan item yang kelihatan dalam senarai, meningkatkan prestasi dengan ketara. <li> Elakkan bersarang dalam: Pastikan komponen item senarai anda semudah mungkin. Elakkan komponen yang sangat bersarang dalam item senarai, kerana ini boleh membawa kepada peningkatan masa penubuhan semula. <li> Kemas Kini Batching: Gunakan unstable_batchedUpdates dari ReactDom untuk mengikat beberapa kemas kini keadaan, yang dapat meningkatkan prestasi dengan mengurangkan bilangan render. <li> Gunakan operasi senarai yang cekap: Apabila mengemas kini senarai, lebih suka operasi seperti filter atau map ke atas splice atau push untuk mengelakkan mutasi array asal, yang boleh membawa kepada pelaku semula yang tidak perlu.

Apakah kesilapan biasa yang harus dielakkan apabila menyenaraikan senarai dalam React?

Apabila membuat senarai dalam React, penting untuk mengelakkan perangkap biasa yang boleh membawa kepada kesilapan atau masalah prestasi:

<li> Tidak menggunakan kunci: Salah satu kesilapan yang paling biasa tidak menggunakan kekunci dengan item senarai. Tanpa kunci, React mungkin menghadapi masalah mengenal pasti item yang telah berubah, yang membawa kepada kemas kini yang salah dan prestasi yang lemah. <li> Menggunakan indeks array sebagai kunci: Menggunakan indeks array sebagai kunci boleh menyebabkan masalah apabila senarai pesanan berubah, yang membawa kepada pelaku semula yang tidak perlu dan ketidakcocokan keadaan yang berpotensi. Gunakan pengenal yang unik dan stabil. <li>

Mutasi array asal: Secara langsung bermutasi array asal boleh membawa kepada tingkah laku dan pepijat yang tidak dijangka. Sentiasa buat array baru semasa mengemas kini keadaan.

 <code class="jsx">// Incorrect: Mutating the original array const items = [{ id: 1, name: 'Item 1' }]; items.push({ id: 2, name: 'Item 2' }); // Correct: Creating a new array const items = [{ id: 1, name: 'Item 1' }]; const newItems = [...items, { id: 2, name: 'Item 2' }];</code>

<li> Komponen kompleks yang lebih tinggi: Elakkan meletakkan logik kompleks atau komponen bersarang di dalam item senarai jika tidak diperlukan. Ini boleh membawa kepada isu-isu prestasi kerana setiap perubahan dalam senarai akan menyebabkan keseluruhan pokok komponen untuk membuat semula. <li> Mengabaikan virtualisasi untuk senarai besar: Untuk senarai yang sangat besar, gagal menggunakan virtualisasi boleh mengakibatkan prestasi yang lemah. Pertimbangkan untuk menggunakan perpustakaan seperti react-window untuk menjadikan hanya bahagian senarai yang kelihatan.

Dengan mengelakkan kesilapan biasa ini, anda dapat memastikan bahawa senarai anda yang diberikan dalam React adalah efisien dan bebas kesilapan.

Atas ialah kandungan terperinci Bagaimana anda membuat senarai data dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!