Bagaimana untuk Mencegah useEffect daripada Berjalan pada Render Awal dalam React?

Menghalang useEffect Hook daripada Berjalan pada Initial Render

Dalam React, useEffect hook menyediakan fungsi yang serupa dengan kaedah kitaran hayat componentDidUpdate. Walau bagaimanapun, tidak seperti componentDidUpdate, useEffect berjalan selepas setiap render, termasuk render awal. Ini boleh menjadi gelagat yang tidak diingini apabila kita hanya mahu kesan dijalankan selepas kemas kini berikutnya.

Untuk mengelakkan useEffect daripada dijalankan pada pemaparan awal, kita boleh memanfaatkan dua pendekatan:

Menggunakan useRef Hook

useRef Hook membolehkan kami menyimpan nilai boleh ubah yang berterusan antara pemaparan. Kami boleh menggunakannya untuk menjejaki sama ada ini kali pertama fungsi useEffect sedang digunakan.

const firstUpdate = useRef(true);
useLayoutEffect(() => {
  if (firstUpdate.current) {
    firstUpdate.current = false;
    return;
  }

  // Run the effect after the initial render
  console.log("useEffect ran after first render");
}, []);

Menggunakan useLayoutEffect Hook

Sebagai alternatif, kita boleh menggunakan useLayoutEffect cangkuk. Tidak seperti useEffect, useLayoutEffect berjalan serentak selepas kemas kini DOM berlaku, yang merupakan tingkah laku yang sama seperti componentDidUpdate.

useLayoutEffect(() => {
  // Run the effect after the initial render
  console.log("useLayoutEffect ran after first render");
}, []);

Pendekatan ini berkesan menghalang useEffect daripada berjalan pada pemaparan awal, memastikan kesan hanya berlaku selepas yang berikutnya kemas kini, sama seperti componentDidUpdate.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah useEffect daripada Berjalan pada Render Awal dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!