UseState dan UseEffect Hook dalam React

Dalam React, useState dan useEffect ialah dua cangkuk asas yang digunakan untuk mengurus keadaan dan mengendalikan kesan sampingan dalam komponen berfungsi.

1. useState Hook

Kait useState membolehkan anda menambah keadaan pada komponen berfungsi. Ia mengembalikan tatasusunan dengan dua elemen:

1. Nilai keadaan semasa.
2. Fungsi untuk mengemas kini nilai keadaan tersebut.

Contoh:

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Update state using the setCount function */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

Dalam contoh ini:

• useState(0) memulakan pembolehubah keadaan kiraan dengan nilai 0.
• setCount digunakan untuk mengemas kini keadaan apabila butang diklik.

2. useEffect Hook

Kait useEffect membolehkan anda melakukan kesan sampingan dalam komponen anda, seperti pengambilan data, langganan atau menukar DOM secara manual. Ia memerlukan dua hujah:

1. Fungsi yang mengandungi logik kesan sampingan.
2. Susun atur kebergantungan pilihan yang menentukan bila kesannya harus dijalankan.

Contoh:

import React, { useState, useEffect } from 'react';

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

  // useEffect runs after every render, but the dependency array makes it run only when `count` changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Cleanup function (optional)
    return () => {
      console.log('Cleanup for count:', count);
    };
  }, [count]); // Dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Example;

Dalam contoh ini:

• useEffect mengemas kini tajuk dokumen apabila kiraan berubah.
• Kesan berlaku selepas setiap pemaparan jika kiraan berubah, kerana kiraan disertakan dalam tatasusunan kebergantungan.
• Fungsi pembersihan pilihan berjalan sebelum kesan berjalan semula atau apabila komponen dinyahlekap, yang berguna untuk membersihkan langganan atau pemasa.

Kedua-dua cangkuk membantu mengurus keadaan dan kesan sampingan dalam komponen berfungsi dengan berkesan, menjadikan pembangunan React lebih ringkas dan berkuasa.
.
.
.

Jom Ringkaskan....
.
.
.

Berikut ialah ringkasan useState dan cangkuk useEffect dalam React:

useState Hook

• Tujuan: Mengurus keadaan dalam komponen berfungsi.
• Sintaks: const [keadaan, setState] = useState(initialValue);
• Parameter:
  • initialValue: Nilai keadaan awal.
• Pemulangan:
  • Susun atur dengan dua elemen:
  • keadaan: Nilai keadaan semasa.
  • setState: Berfungsi untuk mengemas kini keadaan.

Contoh Penggunaan:

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

useEffect Hook

• Tujuan: Mengendalikan kesan sampingan dalam komponen berfungsi, seperti pengambilan data, langganan atau kemas kini DOM manual.
• Sintaks: useEffect(() => { /* kesan logik */ }, [bergantung]);
• Parameter:
  • Fungsi Kesan: Mengandungi kod untuk dijalankan sebagai kesan sampingan.
  • Susun Kebergantungan (pilihan): Senarai kebergantungan yang mencetuskan kesan apabila ditukar. Jika kosong, kesannya berjalan sekali sahaja selepas pemaparan awal. Jika diabaikan, kesannya berlaku selepas setiap paparan.
• Fungsi Pembersihan (pilihan): Mengembalikan fungsi daripada fungsi kesan untuk membersihkan sumber.

Contoh Penggunaan:

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => {
    // Cleanup logic here
  };
}, [count]);

Isi Penting:

• useState memudahkan pengurusan keadaan dalam komponen berfungsi.
• useEffect mengendalikan kesan sampingan dan secara pilihan boleh membersihkannya sendiri.
• Kedua-dua cangkuk berfungsi bersama-sama untuk mencipta komponen berfungsi yang dinamik dalam React.

Atas ialah kandungan terperinci UseState dan UseEffect Hook dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!