Wie kann verhindert werden, dass „useEffect' beim ersten Rendern in React ausgeführt wird?

Verhindern, dass useEffect beim ersten Rendern ausgeführt wird

Der useEffect()-Hook von React ahmt das Verhalten von ComponentDidUpdate() nach, einschließlich seines Aufrufs nach jedem Rendern . Im Gegensatz zu „componentDidUpdate()“ wird „useEffect()“ jedoch auch beim ersten Rendern ausgeführt. In diesem Artikel wird beschrieben, wie Sie dieses Problem beheben und verhindern können, dass useEffect() während der ersten Renderphase ausgeführt wird.

Einsatz des useRef-Hooks

Um festzustellen, ob useEffect() vorhanden ist Wenn Sie es zum ersten Mal ausführen, verwenden Sie den Hook useRef(). useRef() speichert einen veränderlichen Wert. In diesem Fall kann nachverfolgt werden, ob es sich um das erste Rendering handelt.

Verwendung von useLayoutEffect

Wenn der Effekt in derselben Phase wie „componentDidUpdate()“ auftreten soll, sollten Sie die Verwendung von „useLayoutEffect“ in Betracht ziehen () anstelle von useEffect().

Beispiel

Der folgende Code zeigt, wie verhindert werden kann, dass useEffect() beim ersten Rendern mit useRef() ausgeführt wird:

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

In diesem Code:

1. Wir definieren eine Komponentenfunktion, die useState() verwendet, um den Zählstatus zu verwalten, und den useRef()-Hook, um die erste Aktualisierung zu verfolgen.
2. Wir verwenden useLayoutEffect(), um den Effekt in derselben Phase wie ComponentDidUpdate() auszuführen.
3. Innerhalb des Effekts prüfen wir, ob es sich um das erste Update handelt (firstUpdate.current ist wahr). Wenn ja, setzen wir firstUpdate.current auf „false“ und kehren vorzeitig zurück, um zu verhindern, dass der Effekt ausgeführt wird.

Wenn Sie diesen Code ausführen, werden Sie feststellen, dass „componentDidUpdateFunction“ erst nach dem ersten Rendern protokolliert wird Wenn auf die Schaltfläche geklickt wird, wird das Verhalten von „componentDidUpdate()“ nachgeahmt.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass „useEffect' beim ersten Rendern in React ausgeführt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!