Memanfaatkan Kuasa Reaksi: Panduan Komprehensif untuk menggunakanState dan useEffect-tutorial js-php.cn

Memanfaatkan Kuasa Reaksi: Panduan Komprehensif untuk menggunakanState dan useEffect

DDD

Lepaskan： 2024-11-02 04:33:02

asal

392 orang telah melayarinya

Harnessing the Power of React: Comprehensive Guide to useState and 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));
};

Salin selepas log masuk

Mengemas kini Objek dalam Keadaan

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

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

Salin selepas log masuk

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);
};

Salin selepas log masuk

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;
});

Salin selepas log masuk

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>
  );
};

Salin selepas log masuk

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)}
    />
  );
};

Salin selepas log masuk

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
  };
}, []);

Salin selepas log masuk

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
  };
}, []);

Salin selepas log masuk

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
  };
}, []);

Salin selepas log masuk

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
});

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!