Props dan State React.JS

Tentu! Mari kita mendalami prop dan nyatakan dalam React, meneroka peranan mereka, cara mereka berbeza dan memberikan contoh yang lebih terperinci.

Props (Properties)

1. Definisi: Prop adalah singkatan untuk hartanah. Ia adalah cara untuk menghantar data daripada satu komponen ke komponen lain, biasanya daripada komponen induk kepada komponen anak.

2. Ciri-ciri:

Baca Sahaja: Setelah ditetapkan, komponen anak tidak boleh mengubah suai propnya. Ia tidak berubah dalam komponen kanak-kanak.
Digunakan untuk Konfigurasi: Props membolehkan anda menyesuaikan tingkah laku dan penampilan komponen.
Aliran Data: Props membolehkan aliran data dan berfungsi ke bawah hierarki komponen, menggalakkan kebolehgunaan semula.
3. Penggunaan: Anda boleh menghantar sebarang jenis data melalui prop, termasuk rentetan, nombor, objek, tatasusunan dan fungsi.

Contoh Alat Peraga:

// ParentComponent.js
function ParentComponent() {
  const message = "Hello, Child!";

  return <childcomponent greeting="{message}"></childcomponent>;
}

// ChildComponent.js
function ChildComponent(props) {
  return <h1 id="props-greeting">{props.greeting}</h1>;
}

Dalam contoh ini:

• ParentComponent melepasi rentetan "Hello, Child!" kepada ChildComponent melalui prop yang dipanggil salam.
• ChildComponent menerima prop ini dan memaparkannya dalam

  tag.

negeri

1. Definisi: Keadaan ialah objek React terbina dalam yang menyimpan maklumat tentang keadaan semasa komponen. Tidak seperti prop, keadaan diuruskan dalam komponen itu sendiri.

2. Ciri-ciri:

Mutable: Keadaan boleh ditukar menggunakan fungsi seperti setState (untuk komponen kelas) atau cangkuk useState (untuk komponen berfungsi).
Setempat kepada Komponen: Keadaan adalah khusus untuk komponen yang ditakrifkan dan tidak boleh diakses daripada komponen lain melainkan diangkat.
Kereaktifan: Perubahan dalam keadaan mencetuskan pemaparan semula komponen, membenarkan kemas kini dinamik dalam UI.
3. Penggunaan: Keadaan biasanya digunakan untuk mengurus input pengguna, menjejak status komponen dan bertindak balas kepada interaksi pengguna.

Contoh Negeri:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

Dalam contoh ini:

• Komponen Kaunter mengekalkan keadaannya sendiri yang dipanggil kiraan, dimulakan kepada 0.
• Apabila butang diklik, fungsi setCount mengemas kini keadaan kiraan, menyebabkan komponen itu memaparkan semula dan memaparkan kiraan baharu.

Ringkasan

• Props adalah untuk menghantar data ke bawah pepohon komponen dan dibaca sahaja. Mereka membantu mencipta komponen boleh guna semula yang boleh disesuaikan.
• Keadaan adalah untuk mengurus keadaan dalaman komponen dan boleh dikemas kini, yang membawa kepada kelakuan dinamik dan pemaparan.

Memahami perbezaan antara prop dan keadaan adalah penting untuk membina aplikasi React yang berkesan dan teratur. Jika anda mempunyai lebih banyak soalan atau memerlukan penjelasan lanjut mengenai mana-mana bahagian, jangan ragu untuk bertanya!

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