Bagaimana untuk Mengelakkan React useEffect Hook daripada Berjalan pada Initial Render?

Menghalang React useEffect Hook daripada Berjalan pada Initial Render

useEffect hook ialah alat berharga untuk menguruskan kesan sampingan dalam komponen React. Walau bagaimanapun, secara lalai, ia berjalan selepas setiap pemaparan, termasuk yang awal. Ini boleh membawa kepada tingkah laku yang tidak diingini, seperti yang digambarkan oleh kod contoh. Untuk mengatasinya, terdapat dua strategi yang berkesan.

1. Menggunakan Cangkuk useRef untuk Menjejaki Render Awal

Cangkuk useRef membolehkan kami menyimpan nilai boleh ubah yang berterusan sepanjang pemaparan semula. Dengan memanfaatkan ini, kita boleh menjejaki sama ada ini kali pertama fungsi useEffect dilaksanakan.

Contoh:

const { useState, useRef, useEffect } = React;

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

  const firstUpdate = useRef(true);
  useEffect(() => {
    // Skip the initial render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("useEffect ran");
  });

  return (
    <div>
      <p>useEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

2. Menggunakan useLayoutEffect Hook

useLayoutEffect Hook diperkenalkan untuk mensimulasikan gelagat componentDidUpdate dari segi fasa pelaksanaan. Ia dijalankan sebelum penyemak imbas melukis, menghalang sebarang gangguan visual.

Contoh:

const { useState, useLayoutEffect } = React;

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

  useLayoutEffect(() => {
    console.log("useLayoutEffect ran");
  });

  return (
    <div>
      <p>useLayoutEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

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