Contoh Kod Reaksi Tiga Buggy dan Cara Membaikinya

React menawarkan pelbagai pendekatan pengekodan untuk fungsi yang sama. Walaupun seolah -olah setara, beberapa kaedah membuktikan lebih cekap dan boleh dipelihara. Artikel ini menyoroti tiga contoh kod reaksi "kereta" biasa, menunjukkan bagaimana kod yang kelihatan betul dapat membawa kepada isu -isu yang dapat dielakkan. Kami akan meneroka penyelesaian untuk mengekalkan, daya tahan, dan fungsi yang lebih baik.

Artikel ini menganggap kebiasaan dengan cangkuk reaksi. Bagi pemula, sumber seperti pengenalan Kingsley Silas mengenai helah CSS atau dokumentasi Resmi Rasmi disyorkan. Kami akan memberi tumpuan kepada masalah halus yang, walaupun tidak menyebabkan kemalangan aplikasi, boleh menyebabkan tingkah laku yang tidak dijangka jika diabaikan.

Kod Buggy #1: Mutasi Negeri dan Props

Secara langsung mengubah keadaan atau prop dalam React adalah anti-corak yang penting. Walaupun seolah -olah berfungsi dalam beberapa kes, amalan ini dapat memperkenalkan pepijat halus.

Mari kita gambarkan dengan contoh: komponen induk yang menguruskan kiraan dan anak yang memaparkan kiraan itu ditambah 5. Pendekatan naif mungkin secara langsung mengubah suai prop dalam komponen kanak -kanak. Ini pada mulanya berfungsi, tetapi masalah timbul apabila keadaan refactored untuk menggunakan objek dan bukannya nombor yang mudah. Oleh kerana pengendalian JavaScript jenis primitif dan rujukan, mengubahsuai objek prop dalam komponen kanak -kanak secara tidak sengaja mengubah keadaan induk, yang membawa kepada kenaikan yang tidak dijangka.

Penyelesaiannya

Elakkan mutasi dengan mengira nilai yang diubah secara langsung dalam fungsi render komponen kanak -kanak:

 fungsi anak ({state}) {
  kembali<div><p> kiraan 5 = {state.count 5}</p></div> ;
}

Untuk senario yang lebih kompleks, buat salinan prop sebelum transformasi. Gunakan sintaks penyebaran untuk pengklonan cetek:

 fungsi anak ({state}) {
  const copy = {... state};
  kembali<div><p> Count 5 = {copy.count 5}</p></div> ;
}

Untuk objek yang sangat bersarang, pertimbangkan JSON.parse(JSON.stringify(myobject)) atau perpustakaan seperti deepClone Lodash untuk pengklonan yang boleh dipercayai. Sebagai alternatif, menggunakan Immutable.js memastikan kebolehubahan di seluruh struktur data anda.

Kod Buggy #2: Negeri yang diperolehi

Menggunakan prop untuk memulakan keadaan ("keadaan yang diperolehi") boleh membuat isu -isu. Apabila keadaan komponen induk berubah, keadaan komponen kanak -kanak tetap tidak terjejas selepas penampilan awalnya. Ini melanggar prinsip satu sumber kebenaran untuk data komponen.

Penyelesaiannya

Elakkan keadaan yang diperolehi. Sebaliknya, biarkan komponen kanak -kanak menguruskan negara sendiri secara bebas. Sekiranya kanak -kanak memerlukan data dari ibu bapa, lulus sebagai prop tetapi jangan gunakannya untuk memulakan keadaan kanak -kanak.

Untuk senario yang memerlukan menetapkan semula negeri kanak -kanak berdasarkan perubahan ibu bapa (contohnya, penyuntingan item dalam koleksi), menggunakan prop key . Menukar daya key bertindak balas untuk mewujudkan contoh baru komponen kanak -kanak, dengan berkesan menetapkan semula keadaannya.

Kod Buggy #3: Bug penutupan basi

Penutupan basi adalah isu biasa dengan pengendali useEffect dan acara. Operasi asynchronous dalam useEffect boleh menggunakan keadaan ketinggalan zaman atau prop jika array ketergantungan tidak diuruskan dengan betul.

Penyelesaiannya

Untuk operasi asynchronous dalam useEffect , gunakan borang kemas kini fungsian setState untuk memastikan penutupan menggunakan nilai keadaan terkini:

 useeffect (() => {
  Biarkan id = setInterval (() => {
    setCount (prevCount => prevCount 1);
  }, 1000);
  kembali () => clearInterval (id);
}, []);

Sebagai alternatif, gunakan useRef untuk mengekalkan rujukan yang boleh berubah kepada nilai negeri. Untuk pengendali acara, pastikan mereka mengakses nilai negara terkini dengan merujuknya dalam fungsi pengendali, atau refactor untuk menguruskan manipulasi DOM dalam kitaran render komponen React.

Kesimpulan

Perhatian yang teliti terhadap pengurusan negeri dan tingkah laku penutupan adalah penting untuk mengelakkan pepijat halus dalam aplikasi React. Memahami perangkap biasa dan penyelesaian mereka membawa kepada kod yang lebih mantap dan boleh dipelihara. Ingatlah untuk memanfaatkan ciri React dengan berkesan dan berunding dengan sumber yang disenaraikan untuk pemahaman yang lebih mendalam.

Atas ialah kandungan terperinci Contoh Kod Reaksi Tiga Buggy dan Cara Membaikinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!