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

Damit Reacts useEffect Hook die anfängliche Render-Ausführung vermeidet

Die Lebenszyklusmethode „componentDidUpdate()“ in klassenbasierten React-Komponenten wird nach jedem Rendern aufgerufen. außer dem ersten. Um dieses Verhalten mit dem useEffect-Hook zu emulieren, kann es so aussehen, als würde der Hook bei jedem Rendern ausgeführt, auch beim ersten Mal.

Lösung

Um zu verhindern, dass useEffect ausgeführt wird Beim ersten Rendern kann die Verwendung des useRef-Hooks dabei helfen, nachzuverfolgen, ob es sich um den ersten Aufruf des Effekts handelt.

Um außerdem das Verhalten von ComponentDidUpdate nachzuahmen, das in der Phase „Layouteffekte“ ausgeführt wird, sollten Sie stattdessen die Verwendung von useLayoutEffect in Betracht ziehen useEffect.

Beispiel

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

Dieser Ansatz verwendet den useRef-Hook, um das erste Update zu verfolgen und stellt sicher, dass der Effekt nur bei nachfolgenden Updates ausgeführt wird und das Verhalten von widerspiegelt ComponentDidUpdate in klassenbasierten Komponenten.

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