Bagaimana untuk Menghalang useEffect Hook daripada Berjalan pada Render Awal dalam React?

Membuat React's useEffect Hook Elakkan Pelaksanaan Awal Render

Kaedah kitaran hayat componentDidUpdate() dalam komponen React berasaskan kelas digunakan selepas setiap pemaparan, kecuali yang awal. Untuk mencontohi tingkah laku ini dengan cangkuk useEffect, nampaknya cangkuk itu berjalan pada setiap pemaparan, termasuk kali pertama.

Penyelesaian

Untuk mengelakkan useEffect daripada berjalan pada pemaparan awal, menggunakan cangkuk useRef boleh membantu menjejaki sama ada ia adalah seruan awal kesan.

Selain itu, untuk meniru gelagat componentDidUpdate, yang berjalan dalam fasa "kesan reka letak", pertimbangkan untuk menggunakan useLayoutEffect dan bukannya useEffect.

Contoh

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")
);

Pendekatan ini menggunakan cangkuk useRef untuk menjejak kemas kini pertama dan memastikan bahawa kesan hanya dilaksanakan semasa kemas kini berikutnya, mencerminkan tingkah laku componentDidUpdate dalam komponen berasaskan kelas.

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