Memahami Komponen dan Prop dalam React: Asas UI Boleh Digunakan Semula

Komponen dan Prop dalam Reaksi: Blok Binaan Antara Muka Pengguna

Dalam React, Komponen dan Props ialah konsep asas yang membolehkan pembangun mencipta antara muka pengguna yang boleh digunakan semula dan dinamik. Mereka memudahkan pembangunan aplikasi dengan membahagikan UI kepada bahagian yang lebih kecil dan boleh diurus dan menghantar data antara bahagian ini.

---

1. Apakah Komponen?

Satu Komponen dalam React ialah blok kod bebas yang boleh digunakan semula yang mentakrifkan sebahagian daripada UI. Fikirkan komponen sebagai blok binaan untuk membina aplikasi.

Jenis Komponen

a. Komponen Berfungsi

• Jenis komponen React yang paling ringkas.
• Ditakrifkan sebagai fungsi JavaScript yang menerima prop dan mengembalikan JSX.

Contoh:

const Greeting = (props) => {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
};

b. Komponen Kelas

• Ditakrifkan menggunakan kelas ES6.
• Sertakan ciri tambahan seperti kaedah keadaan dan kitaran hayat (sebelum React Hooks).
• Biasanya digunakan dalam projek React yang lebih lama.

Contoh:

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

---

Mengapa Menggunakan Komponen?

• Kebolehgunaan semula: Tulis sekali dan gunakan komponen yang sama di berbilang tempat.
• Kebolehselenggaraan: Urus dan nyahpepijat bahagian kecil UI yang difokuskan.
• Kebolehbacaan: Pecahkan UI kompleks kepada bahagian yang lebih mudah dan boleh difahami.

---

2. Apakah Props?

Props (singkatan daripada properties) ialah mekanisme untuk menghantar data daripada komponen induk kepada komponen anak. Props adalah baca sahaja, bermakna ia tidak boleh diubah suai oleh komponen kanak-kanak.

Cara Prop Berfungsi

• Diluluskan kepada komponen sebagai hujah.
• Boleh diakses melalui objek props dalam komponen berfungsi atau ini.props dalam komponen kelas.

Contoh:

const UserCard = (props) => {
  return (
    <div>
      <h2 id="props-name">{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
};

// Usage
<usercard name="John Doe" email="john.doe@example.com"></usercard>

---

3. Ciri-ciri Utama Props

• Aliran Sehala: Aliran prop daripada ibu bapa kepada anak dalam aliran data sehala.
• Tidak boleh ubah: Props tidak boleh ditukar oleh komponen penerima.
• Dinamik: Komponen induk boleh menghantar nilai dinamik atau pembolehubah kepada anak mereka.

Contoh Alat Dinamik:

const Greeting = (props) => {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
};

---

4. Menggabungkan Komponen dan Prop

Aplikasi tindak balas biasanya terdiri daripada berbilang komponen yang berkomunikasi menggunakan prop. Gabungan ini membolehkan anda membina struktur hierarki dan dinamik.

Contoh: Komponen Bersarang dengan Props

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

---

5. Prop Lalai dan Jenis Prop

a. Prop Lalai

Anda boleh menetapkan nilai lalai untuk prop menggunakan sifat defaultProps.

Contoh:

const UserCard = (props) => {
  return (
    <div>
      <h2 id="props-name">{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
};

// Usage
<usercard name="John Doe" email="john.doe@example.com"></usercard>

b. Jenis Prop

Gunakan perpustakaan jenis prop untuk mengesahkan jenis prop yang dihantar kepada komponen.

Contoh:

const App = () => {
  const user = { name: "Alice", email: "alice@example.com" };

  return <usercard name="{user.name}" email="{user.email}"></usercard>;
};

---

6. Perbezaan Antara Props dan State

Aspect	Props	State
Definition	Passed from parent to child.	Local to the component.
Mutability	Immutable (read-only).	Mutable (can be updated).
Purpose	Share data between components.	Manage internal component data.

Aspek

---

Props

Negeri Takrif

Diteruskan daripada ibu bapa kepada anak. Setempat kepada komponen.

Mutability

Tidak boleh ubah (baca sahaja). Mutable (boleh dikemas kini).

Tujuan

Kongsi data antara komponen. Urus data komponen dalaman.

---

7. Bila Perlu Menggunakan Props

Haruskan data kepada komponen kanak-kanak.

1. Memaparkan kandungan dinamik (cth., profil pengguna, butiran produk).

   Bina komponen UI yang boleh digunakan semula dan boleh disesuaikan (cth., butang, kad).

   8. Amalan Terbaik

2. Pastikan Komponen Kecil dan Fokus

   Setiap komponen harus mempunyai satu tujuan.

3. Gunakan Prop Lalai dan Jenis Prop

   Pastikan prop mempunyai lalai yang wajar dan sahkan jenisnya.

4. Elakkan Menggunakan Alat Peraga

   Jika komponen kanak-kanak memerlukan data yang luas, pertimbangkan untuk mengurusnya dalam konteks yang dikongsi atau menggunakan pustaka pengurusan negeri.

---

Ikuti Konvensyen Penamaan

Gunakan nama deskriptif untuk prop untuk mengekalkan kebolehbacaan kod.

9. Kesimpulan Komponen dan Props membentuk tulang belakang pembangunan React. Dengan memecahkan UI kepada komponen yang boleh diguna semula dan menggunakan prop untuk menghantar data secara dinamik, anda boleh mencipta aplikasi boleh skala, boleh diselenggara dan interaktif. Menguasai konsep ini adalah penting untuk membina aplikasi web moden dengan React.

Atas ialah kandungan terperinci Memahami Komponen dan Prop dalam React: Asas UI Boleh Digunakan Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!