Memanfaatkan Kuasa Reaksi: Panduan Komprehensif untuk menggunakanState dan useEffect

Kes Penggunaan Lanjutan untuk useState

1. Mengurus Tatasusunan dan Objek

Apabila berurusan dengan tatasusunan dan objek dalam keadaan, anda perlu memastikan bahawa anda mengemas kininya secara kekal. Ini menghalang mutasi yang tidak diingini yang boleh membawa kepada pepijat.

Menguruskan Susunan Objek

const [items, setItems] = useState([{ id: 1, name: 'Item 1' }]);

const addItem = (newItem) => {
  setItems(prevItems => [...prevItems, newItem]);
};

const removeItem = (id) => {
  setItems(prevItems => prevItems.filter(item => item.id !== id));
};

Mengemas kini Objek dalam Keadaan

const [user, setUser] = useState({ name: '', age: 0 });

const updateUser = (field, value) => {
  setUser(prevUser => ({ ...prevUser, [field]: value }));
};

2. Kemas Kini Berfungsi

Menggunakan kemas kini berfungsi dengan useState boleh membantu anda mengelakkan isu apabila bergantung pada keadaan semasa, terutamanya dalam situasi tak segerak.

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

3. Permulaan Malas

Anda boleh menetapkan keadaan awal menggunakan fungsi, yang boleh berguna untuk pengiraan mahal atau apabila nilai awal diperoleh daripada prop.

const [count, setCount] = useState(() => {
  const savedCount = localStorage.getItem('count');
  return savedCount ? JSON.parse(savedCount) : 0;
});

Corak Biasa dengan useState

1. Komponen Terkawal

Menggunakan useState dalam borang untuk mengawal input:

const Form = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({ ...prevData, [name]: value }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
    </form>
  );
};

2. Mematikan Input

Anda boleh mencipta input nyahlantun menggunakan useState dan useEffect:

const DebouncedInput = () => {
  const [inputValue, setInputValue] = useState('');
  const [debouncedValue, setDebouncedValue] = useState(inputValue);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, 300);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
};

Kes Penggunaan Lanjutan untuk useEffect

1. Mengambil Data dengan Pembatalan

Apabila mengambil data, amalan yang baik untuk mengendalikan penyahlekapan komponen untuk mengelak daripada menetapkan keadaan pada komponen yang tidak dilekapkan.

useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    if (isMounted) {
      setData(result);
    }
  };

  fetchData();

  return () => {
    isMounted = false; // Cleanup
  };
}, []);

2. Melanggan Acara

Anda boleh melanggan acara seperti sambungan WebSocket atau sumber data luaran lain.

useEffect(() => {
  const socket = new WebSocket('ws://example.com/socket');

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    setMessages(prevMessages => [...prevMessages, message]);
  };

  return () => {
    socket.close(); // Cleanup on unmount
  };
}, []);

3. Animasi dan Manipulasi DOM

Anda boleh menggunakan useEffect untuk animasi atau manipulasi DOM langsung:

useEffect(() => {
  const element = document.getElementById('animate');
  element.classList.add('fade-in');

  return () => {
    element.classList.remove('fade-in'); // Cleanup
  };
}, []);

Perangkap Biasa

1. Tatasusunan Ketergantungan Tiada

Jika anda meninggalkan tatasusunan kebergantungan, kesan anda akan dijalankan selepas setiap pemaparan, yang berpotensi membawa kepada isu prestasi.

// Avoid this if you only want it to run once
useEffect(() => {
  // Logic here
});

2. Senarai Ketergantungan yang Salah

Pastikan anda memasukkan semua pembolehubah yang digunakan di dalam kesan:

useEffect(() => {
  console.log(value); // Make sure 'value' is included in the dependency array
}, [value]); // Include all dependencies

3. Mengemaskini Negeri Berdasarkan Negeri Terdahulu

Sentiasa gunakan bentuk fungsian penetap apabila mengemas kini keadaan berdasarkan nilai sebelumnya untuk mengelakkan penutupan basi:

setCount(prevCount => prevCount + 1); // Correct

Kesimpulan

Kedua-dua useState dan useEffect adalah cangkuk penting dalam React yang membolehkan anda mengurus keadaan dan mengendalikan kesan sampingan dalam komponen berfungsi dengan berkesan. Memahami kes dan corak penggunaan lanjutan boleh membantu anda menulis kod React yang lebih bersih dan cekap.

Atas ialah kandungan terperinci Memanfaatkan Kuasa Reaksi: Panduan Komprehensif untuk menggunakanState dan useEffect. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!