Senarai dan Kekunci React

Dalam React, senarai dan kekunci ialah konsep penting untuk memaparkan koleksi elemen dengan cekap dan mengekalkan identitinya merentas pemaparan semula. Berikut ialah gambaran ringkas:

Senarai

Apabila anda perlu membuat beberapa item, anda biasanya memetakan tatasusunan untuk membuat senarai komponen. Berikut ialah contoh asas:

const fruits = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

kunci

Kunci membantu React mengenal pasti item yang telah diubah, ditambah atau dialih keluar. Mereka harus unik di kalangan adik-beradik tetapi tidak perlu unik di peringkat global. Kekunci hendaklah stabil, bermakna ia tidak boleh berubah antara pemaparan. Amalan biasa ialah menggunakan pengecam unik daripada data anda, seperti ID:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Amalan Terbaik

• Gunakan ID unik: Jika data anda mempunyai pengecam unik, sentiasa gunakannya sebagai kunci.
• Elakkan menggunakan indeks tatasusunan: Menggunakan indeks sebagai kunci boleh membawa kepada isu dengan keadaan komponen dan prestasi semasa pemaparan semula, terutamanya jika senarai boleh berubah.
• Pastikan kunci konsisten: Jika anda menyusun semula atau menapis senarai, pastikan kunci kekal sama untuk mengelakkan paparan semula yang tidak perlu.

Dengan mengikuti garis panduan ini, anda boleh membuat senarai yang cekap dan dinamik dalam aplikasi React anda!

Atas ialah kandungan terperinci Senarai dan Kekunci React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!