Bagaimana untuk Menghalang `useEffect` daripada Dijalankan pada Initial Render dalam React?

Menghalang useEffect daripada Berjalan pada Initial Render

React's useEffect() cangkuk meniru gelagat componentDidUpdate(), termasuk penggunaannya selepas setiap pemaparan . Walau bagaimanapun, tidak seperti componentDidUpdate(), useEffect() berjalan walaupun pada pemaparan awal. Artikel ini membincangkan cara untuk membetulkan isu ini dan menghalang useEffect() daripada dilaksanakan semasa fasa pemaparan awal.

Menggunakan useRef Hook

Untuk menentukan sama ada useEffect() adalah berjalan buat kali pertama, gunakan cangkuk useRef(). useRef() menyimpan nilai boleh ubah. Dalam kes ini, ia boleh menjejaki sama ada ia adalah pemaparan awal.

Menggunakan useLayoutEffect

Jika kesan harus berlaku semasa fasa yang sama seperti componentDidUpdate(), pertimbangkan untuk menggunakan useLayoutEffect () bukannya useEffect().

Contoh

Kod berikut menunjukkan cara menghalang useEffect() daripada dijalankan pada pemaparan awal menggunakan useRef():

const { useState, useRef, useLayoutEffect } = React;

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

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

    console.log("componentDidUpdateFunction");
  });

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

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

Dalam kod ini:

1. Kami mentakrifkan fungsi komponen yang menggunakan useState() untuk uruskan keadaan kiraan dan cangkuk useRef() untuk menjejak kemas kini pertama.
2. Kami menggunakan useLayoutEffect() untuk menjalankan kesan semasa fasa yang sama seperti componentDidUpdate().
3. Di dalam kesan, kami menyemak sama ada ia adalah kemas kini pertama (firstUpdate.current adalah benar). Jika ya, kami menetapkan firstUpdate.current kepada false dan kembali awal untuk mengelakkan kesan daripada berjalan.

Apabila anda menjalankan kod ini, anda akan perasan bahawa "componentDidUpdateFunction" hanya dilog selepas pemaparan awal apabila butang diklik, meniru gelagat componentDidUpdate().

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