Kesilapan Biasa ost Apabila Menggunakan useState dalam React

Apabila menggunakan useState, anda mungkin membuat kesilapan, dan kesilapan ini kadangkala boleh mengurangkan prestasi. Akibatnya, aplikasi anda mungkin berjalan dengan tidak cekap. Jika anda mengelakkan kesilapan biasa yang akan saya jelaskan, aplikasi anda akan berjalan dengan cekap dan dengan prestasi yang lebih baik.

Jika anda suka artikel saya, anda boleh belikan saya kopi :)
Belikan saya kopi

1. 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

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 [data, setData] = useState(expensiveFunction());

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

Penggunaan yang betul:

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

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

Kesimpulan

Dalam artikel ini, kami mempelajari cara cangkuk useState berfungsi. Jika anda memberi perhatian kepada perkara yang telah saya jelaskan, prestasi dan kecekapan aplikasi anda akan bertambah baik.

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