Mengapa Reaksi Boleh Mengejutkan Anda (Dan Cara Menjinakkannya)

Jika anda pernah bekerja dengan React, anda mungkin pernah mengalami keraguan diri. Saya juga pernah ke sana—tertanya-tanya sama ada saya kehilangan sesuatu yang asas, hanya untuk mengetahui bahawa isu itu bukan pada saya tetapi dengan keanehan React.

Di sini, saya akan berkongsi beberapa gelagat yang tidak dijangka ini, sebab di sebaliknya dan pengalaman saya sendiri. Mudah-mudahan, ini dapat menyelamatkan anda daripada sakit kepala yang saya alami!

---

1. Kemas Kini Negeri: Reaksi Tertunda

Anda memanggil setState, tetapi UI tidak berubah serta-merta. kenapa? Kemas kini keadaan kumpulan bertindak balas untuk prestasi. Ini sering membuat pembangun baharu tidak berjaga-jaga kerana ia bercanggah dengan jangkaan maklum balas segera.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

Mengapa Ia Berlaku:
Kemas kini keadaan React adalah tidak segerak. Ini membolehkan React mengoptimumkan pemaparan semula, tetapi ini bermakna setState tidak mengemas kini kiraan dengan serta-merta. Keadaan baharu hanya akan ditunjukkan selepas komponen dipaparkan semula.

Petua Pro: Gunakan bentuk fungsi setState untuk mengelakkan bergantung pada keadaan basi:

setCount(prevCount => prevCount + 1);

---

2. Susun Kebergantungan dalam Cangkuk: Mengapa Ini Tidak Dijalankan Semula?

Satu lagi perangkap biasa: anda telah menambahkan cangkuk useEffect, tetapi ia nampaknya tidak berfungsi seperti yang anda jangkakan.

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

Kemudian, anda menyedari bahawa mengemas kini someVar tidak mencetuskan kesannya. Selepas nyahpepijat, anda mendapati someVar ialah objek atau tatasusunan.

Mengapa Ia Berlaku:
Tatasusunan kebergantungan React menggunakan kesamaan rujukan. Walaupun dua objek atau tatasusunan kelihatan sama, ia dianggap berbeza jika rujukannya berbeza. Ini boleh membawa kepada tingkah laku yang tidak dijangka jika anda tidak berhati-hati.

Petua Pro: Gunakan utiliti seperti useDeepCompareEffect atau ingat kebergantungan anda.

---

3. Masalah Penyampaian Semula: Mengapa Penyampaian Semula Ini?

Anda mengoptimumkan komponen anda, hanya untuk mendapati ia masih dipaparkan semula tanpa perlu.

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

Walaupun kiraan tidak berubah, komponen dipaparkan semula kerana komponen induk memaparkan semula dan menghantar rujukan prop baharu.

Mengapa Ia Berlaku:
Tingkah laku lalai React adalah untuk memaparkan semula komponen anak melainkan anda menggunakan pengoptimuman seperti React.memo.

Petua Pro: Gunakan React.memo untuk menghafal komponen anda atau gunakanCallback untuk mengelakkan rujukan prop daripada berubah tanpa perlu.

---

4. Prop Utama: Apakah Tawaran Besar?

Anda terlupa untuk menambahkan kunci pada item senarai anda, dan tiba-tiba UI anda berkelakuan tidak menentu.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

Mengapa Ia Berlaku:
React menggunakan kunci untuk menjejaki item yang telah berubah, ditambahkan atau dialih keluar. Tanpa kunci unik, React mungkin menggunakan semula nod DOM secara salah.

Petua Pro: Gunakan pengecam unik sebagai kunci (cth., id daripada data anda).

---

5. Pengendalian Acara: Pencetus Berganda Misteri

Pernah mengalami peristiwa klik butang dua kali dan tertanya-tanya sama ada penyemak imbas anda berhantu?

setCount(prevCount => prevCount + 1);

Anda klik butang dan “Diklik!” muncul dalam konsol dua kali dalam mod pembangunan.

Mengapa Ia Berlaku:
Mod Ketat React sengaja memasang dan menyahlekap komponen dua kali semasa pembangunan untuk menyerlahkan kemungkinan kesan sampingan. Ini boleh menyebabkan pengendali acara memecat beberapa kali.

Petua Pro: Jangan panik—ia hanya dalam pembangunan.

---

6. Komponen Tidak Terkawal: Siapa Berkawal Di Sini?

Anda mencipta elemen input dan memberikannya nilai, mengharapkan React mengurusnya dengan lancar, tetapi anda mendapat amaran.

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

Mengapa Ia Berlaku:
React membezakan antara komponen terkawal (diuruskan oleh keadaan React) dan komponen tidak terkawal (diuruskan oleh DOM). Percampuran kedua-dua menyebabkan masalah.

Petua Pro: Sentiasa gandingkan nilai dengan onChange jika anda mahukan komponen terkawal:

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

---

7. Ruj: Mengapa Saya Tidak Boleh Menggunakan Pembolehubah Biasa?

Anda cuba menyimpan nilai antara pemaparan menggunakan pembolehubah, tetapi ia ditetapkan semula setiap kali.

<ul>
  {items.map(item => (
    <li>{item}</li>
  ))}
</ul>

Mengapa Ia Berlaku:
React memulakan semula pembolehubah pada setiap pemaparan. Untuk nilai berterusan, gunakan useRef:

<button onClick={() => console.log("Clicked!")}>Click Me</button>

---

Fikiran Penutup

Apabila anda tahu "mengapa," anda bukan sahaja bertindak balas — anda mengawalnya. React memang mengagumkan, tetapi kadangkala ia boleh mengelirukan. Memahami mengapa perkara berfungsi seperti yang mereka lakukan menjadikannya lebih mengecewakan. Jika anda faham sebab ia bertindak, anda akan menjimatkan banyak masa dan kekecewaan. Semuanya adalah sebahagian daripada daya tarikannya yang unik (dan kadangkala mengelirukan).

Atas ialah kandungan terperinci Mengapa Reaksi Boleh Mengejutkan Anda (Dan Cara Menjinakkannya). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!