Kesilapan Biasa Semasa Menggunakan useState dalam React

Dalam projek React, useState ialah salah satu cangkuk yang paling biasa digunakan untuk menguruskan keadaan dalam komponen berfungsi. Walau bagaimanapun, terdapat beberapa kesilapan biasa yang dilakukan oleh pembangun apabila menggunakan cangkuk ini, yang boleh membawa kepada isu prestasi dan pepijat yang tidak dijangka. Dalam artikel ini, kita akan melihat 4 kesilapan yang paling biasa dilakukan semasa menggunakan useState dan memberikan petua tentang cara mengelakkannya.

1. Tidak Menggunakan Fungsi untuk Memulakan useState

Apabila memulakan keadaan dengan useState, jika keadaan awal adalah hasil daripada fungsi yang mahal, fungsi ini akan dipanggil pada setiap pemaparan. Ini boleh menjejaskan prestasi dengan teruk, terutamanya jika fungsi melibatkan pengiraan yang kompleks.

Penggunaan yang salah:

const [data, setData] = useState(expensiveFunction());

Dalam contoh ini, expensiveFuncttion dipanggil pada setiap pemaparan, yang membawa kepada kos prestasi yang tidak perlu.

Penggunaan yang betul:

const [data, setData] = useState(() => expensiveFunction());

Dengan menggunakan fungsi di dalam useState, Fungsi mahal hanya dipanggil semasa pemaparan awal, menjimatkan sumber pada pemaparan berikutnya.

2. Menyalahgunakan Fungsi setState

Apabila mengemas kini keadaan dalam React, terutamanya apabila keadaan baharu bergantung pada keadaan sebelumnya, adalah penting untuk menggunakan bentuk fungsi setState. Kesilapan biasa ialah mengemas kini keadaan tanpa mengambil kira nilai sebelumnya.

Penggunaan yang salah:

setCount(count + 1);

Ini boleh menyebabkan isu jika berbilang kemas kini dicetuskan berturut-turut kerana kiraan mungkin tidak mempunyai nilai yang paling dikemas kini.

Penggunaan yang betul:

setCount(prevCount => prevCount + 1);

Pendekatan ini memastikan negeri dikemas kini berdasarkan nilai sebelumnya, menjadikannya lebih dipercayai.

3. Peletakan Penggunaan yang salah

Cakuk React mempunyai beberapa peraturan yang ketat, salah satunya ialah ia hanya boleh digunakan pada tahap teratas komponen berfungsi. Meletakkan cangkuk di dalam gelung, keadaan atau fungsi bersarang boleh memecahkan mekanisme pengurusan keadaan React.

Penggunaan yang salah:

if (condition) {
  const [value, setValue] = useState(false);
}

Ini melanggar peraturan React kerana useState tidak boleh diletakkan di dalam pernyataan bersyarat

Penggunaan yang betul:

const [value, setValue] = useState(false);

if (condition) {
  // Use the state here
}

Dengan mengekalkan useState di luar keadaan atau gelung, React boleh mengurus susunan cangkuk dipanggil dengan betul.

4. Keadaan Berubah Secara Terus

Keadaan dalam React harus dianggap sebagai tidak berubah. Mengubah keadaan secara langsung boleh membawa kepada pepijat dan isu yang tidak dijangka, terutamanya apabila berurusan dengan objek atau tatasusunan.

Penggunaan yang salah:

const [user, setUser] = useState({ name: 'John', age: 30 });
user.name = 'Jane';  // Incorrect mutation
setUser(user);       // Incorrect update

Memutasi pengguna secara langsung tidak mencetuskan pemaparan semula kerana React tidak mengesan perubahan keadaan.

Penggunaan yang betul:

setUser(prevUser => ({
  ...prevUser,
  name: 'Jane'
}));

Di sini, objek baharu dicipta menggunakan pengendali penyebaran, memastikan ketakbolehubah keadaan dan mencetuskan pemaparan semula yang betul.

Kesimpulan

Mengelakkan kesilapan biasa apabila menggunakan useState boleh meningkatkan prestasi dan kebolehpercayaan aplikasi React anda dengan ketara. Sama ada memulakan keadaan dengan betul, menggunakan kemas kini berfungsi atau memastikan ketakbolehubah, mengambil kira amalan terbaik ini akan membantu anda menulis kod React yang lebih bersih dan cekap.

Atas ialah kandungan terperinci Kesilapan Biasa Semasa Menggunakan useState dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!