Cara Reka Bentuk useState dan useEffect Hooks: Panduan Pemula

Apabila membangunkan aplikasi moden, terutamanya apl web, anda selalunya perlu mengurus data yang berubah dari semasa ke semasa. Contohnya, jika pengguna mengklik butang, kami mungkin ingin mengemas kini paparan atau mengambil data baharu daripada pelayan. Cangkuk seperti useState dan useEffect membantu kami mengendalikan perkara ini dengan lancar. Mari kita pecahkan cara konsep ini berfungsi dan terokai cara mereka bentuknya langkah demi langkah.

---

Apakah useState dan useEffect?

• useState: Cangkuk ini membolehkan anda menambah keadaan pada komponen. Fikirkan "nyatakan" sebagai mana-mana data yang komponen perlu ingat antara pemaparan, seperti pembilang atau senarai item.
• useEffect: Cangkuk ini membolehkan anda melakukan tindakan selepas komponen dipaparkan, seperti mengambil data, menyediakan pemasa atau menukar tajuk halaman.

Untuk menjadikan panduan ini mudah difahami, kami akan memecahkan setiap cangkuk kepada logik pentingnya dan membina dari sana.

---

Mereka bentuk useState Hook

1. Memahami Asas Pengurusan Negeri

Bayangkan anda mempunyai apl kaunter yang mudah. Setiap kali anda menekan butang, nombor itu meningkat sebanyak 1. Untuk membuat ini berfungsi, anda perlu menyimpan kiraan semasa di suatu tempat dan mengemas kininya setiap kali butang itu diklik.

2. Matlamat penggunaanState

useState hendaklah:

• Simpan nilai.
• Sediakan cara untuk mengemas kini nilai tersebut.
• Cetuskan pemaparan semula (atau lukis semula) komponen apabila nilai berubah.

3. Konsep Asas keadaan penggunaan

Berikut ialah pecahan asas tentang cara useState mungkin berfungsi di bawah hud:

• Kami memerlukan pembolehubah untuk menahan nilai keadaan kami (cth., pembilang).
• Kami memerlukan fungsi untuk mengemas kini nilai ini.
• Apabila nilai dikemas kini, kita perlu memaparkan semula komponen untuk mencerminkan nilai baharu.

4. Mereka bentuk useState daripada Gores

Mari kita tentukan struktur ringkas untuk digunakanState:

1. Persediaan Awal: Cipta fungsi yang dipanggil useState yang mengambil nilai awal sebagai input.
2. Kembalikan Nilai Semasa dan Fungsi Kemas Kini: Fungsi harus mengembalikan dua perkara:
   • Nilai semasa.
   • Fungsi yang boleh mengemas kini nilai ini.
3. Pencetuskan Paparan Semula: Pastikan bahawa sebarang kemas kini kepada keadaan menyebabkan komponen dipaparkan semula (kami akan memudahkan bahagian ini dalam contoh kami).

Contoh Kod

Begini rupa versi mudah useState:

function useState(initialValue) {
    // Step 1: Create a variable to hold the current state value
    let currentState = initialValue;

    // Step 2: Define a function to update this value
    function setState(newValue) {
        // Update the state
        currentState = newValue;

        // Simulate a re-render (you’d do this differently in a real application)
        render();
    }

    // Step 3: Return the state and the function to update it
    return [currentState, setState];
}

// Usage example:
const [count, setCount] = useState(0);
console.log(count); // Outputs: 0
setCount(1);         // Updates state to 1
console.log(count);  // Outputs: 1 (in real use, this would trigger re-rendering)

---

Mereka bentuk useEffect Hook

Semasa useState mengendalikan data setempat, useEffect membenarkan kami melakukan "kesan sampingan", seperti mengambil data atau mengemas kini tajuk dokumen. Kesan sampingan ialah sebarang interaksi dengan dunia luar.

1. Matlamat penggunaanEffect

useEffect hendaklah:

• Jalankan fungsi selepas komponen dipaparkan.
• Secara pilihan, bersihkan sebarang kesan apabila komponen dialih keluar.
• Secara pilihan jalankan semula jika data yang ditentukan berubah.

2. Konsep Asas Kesan Penggunaan

Bahagian utama penggunaanEffect ialah:

1. Fungsi Kesan: Ini ialah tindakan yang anda mahu lakukan selepas pemaparan, seperti mengelog mesej, mengambil data atau memulakan pemasa.
2. Susun Kebergantungan: Senarai pilihan ini memberitahu useEffect bila hendak dijalankan semula. Jika sebarang nilai dalam senarai ini berubah, kesannya akan dijalankan semula.

3. Merancang kegunaanKesan daripada Gores

Mari kita sediakan struktur ringkas untuk kegunaanKesan:

1. Pelaksanaan Fungsi: Cipta fungsi yang dipanggil useEffect yang mengambil dua parameter:
   • Fungsi kesan untuk dijalankan.
   • Susun atur pergantungan pilihan.
2. Jalankan Kesan Selepas Render: Pastikan fungsi kesan berjalan selepas komponen dipaparkan.
3. Jalankan Kesan pada Perubahan Kebergantungan: Jika tatasusunan kebergantungan disediakan, hanya jalankan semula kesan apabila salah satu kebergantungan berubah.

Contoh Kod

Berikut ialah versi asas useEffect:

let previousDeps;  // To store previous dependencies

function useEffect(effectFunction, dependencies) {
    // Step 1: Check if dependencies have changed
    const hasChanged = dependencies
        ? !previousDeps || dependencies.some((dep, i) => dep !== previousDeps[i])
        : true;

    // Step 2: Run the effect function if dependencies changed
    if (hasChanged) {
        effectFunction();
        previousDeps = dependencies;  // Update the previous dependencies
    }
}

// Usage example:
useEffect(() => {
    console.log("Effect has run!");

    // Simulate cleanup if needed
    return () => console.log("Cleanup effect!");
}, [/* dependencies */]);

---

Menyatukan Semuanya: Contoh Penggunaan

Mari kita simulasi komponen menggunakan useState dan useEffect.

function Component() {
    // Initialize state with useState
    const [count, setCount] = useState(0);

    // Log a message each time count changes with useEffect
    useEffect(() => {
        console.log(`Count has changed to: ${count}`);
    }, [count]);  // Re-run effect if count changes

    // Simulate user interaction
    setCount(count + 1);
}

Dalam contoh ini:

• Kami mencipta keadaan kiraan dengan useState.
• Kami menggunakan useEffect untuk melog mesej apabila kiraan berubah.
• Setiap kali setCount mengemas kini kiraan, ia mencetuskan pemaparan semula, menyebabkan useEffect berjalan semula jika kiraan telah berubah.

---

Ringkasan

Merancang useState dan useEffect melibatkan:

1. Menyimpan nilai (useState) dan menyediakan cara untuk mengemas kini dan memaparkannya semula.
2. Menjalankan fungsi selepas pemaparan (useEffect), dengan pilihan untuk pembersihan dan penjejakan kebergantungan.

Cakuk ini membantu anda membina aplikasi dinamik dan interaktif, sama ada untuk kaunter mudah, mengambil data atau pengurusan keadaan yang lebih kompleks. Dengan asas dalam cangkuk ini, anda serba lengkap untuk mencipta apl yang bertindak balas terhadap tindakan pengguna dan perubahan data masa nyata!

Atas ialah kandungan terperinci Cara Reka Bentuk useState dan useEffect Hooks: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!